fix(#1792): selected item in goa-app-header in mobile not highlighted

GovAlta · May 14, 2024 · c3b0ce7 · c3b0ce7
1 parent cddef31
commit c3b0ce7
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 63 deletions.
diff --git a/libs/web-components/src/assets/css/components.css b/libs/web-components/src/assets/css/components.css
@@ -15,65 +15,24 @@ ul.goa-unordered-list li::marker {
 }
 
 /* GoAAppHeader */
-
-
+/** needed to override a,
+a:visited at reset.css */
 goa-app-header a,
 goa-app-header a:visited {
   color: var(--goa-color-text-default);
 }
 
-goa-app-header a:focus {
-  outline: var(--goa-border-width-l) solid var(--goa-color-interactive-focus) !important;
-  outline-offset: -3px !important;
-  background: var(--goa-color-greyscale-100) !important;
-  cursor: pointer !important;
-  color: var(--goa-color-interactive-hover) !important;
-}
-
-goa-app-header a:active {
-  color: var(--goa-color-text-default) !important;
-}
-
-goa-app-header a:hover,
-goa-app-header a:visited:hover,
-goa-app-header goa-app-header-menu:hover {
-  background: var(--goa-color-greyscale-100);
-  cursor: pointer !important;
-  color: var(--goa-color-interactive-hover);
-}
-
-goa-app-header-menu a,
-goa-app-header-menu a:visited {
-  box-shadow: inset 0 1px 0 0 var(--goa-color-greyscale-200);
-  color: var(--goa-color-text-default);
-  display: block;
-  padding: calc((3rem - var(--goa-line-height-3)) / 2) 1rem;
-  text-decoration: none;
+goa-app-header a.current.inside-collapse-menu,
+goa-app-header a.current.inside-collapse-menu:hover,
+goa-app-header-menu a.current,
+goa-app-header-menu a.current:hover {
+  color:  var(--goa-color-text-light);
 }
 
 goa-app-header-menu a:first-of-type {
   box-shadow: none;
 }
 
-goa-app-header-menu a:hover {
-  background: var(--goa-color-greyscale-100);
-}
-
-goa-app-header-menu a:focus-visible {
-  outline: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
-  outline-offset: -3px;
-}
-
-goa-app-header a.interactive {
-  font-weight: var(--goa-font-weight-medium);
-  text-decoration: underline;
-  color: var(--goa-color-interactive-default);
-}
-
-goa-app-header a.interactive:hover {
-  color: var(--goa-color-interactive-hover);
-}
-
 /* Table */
 
 goa-table table {
@@ -127,4 +86,4 @@ goa-table tfoot tr:first-child td {
 
 goa-table tfoot tr:last-child td {
   border-bottom: none;
-}
+}
diff --git a/libs/web-components/src/assets/css/reset.css b/libs/web-components/src/assets/css/reset.css
@@ -143,4 +143,4 @@ goa-container h1:first-of-type,
 goa-container h2:first-of-type,
 goa-container h3:first-of-type {
   margin-top: 0;
-}
+}
diff --git a/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte b/libs/web-components/src/components/app-header-menu/AppHeaderMenu.svelte
@@ -5,6 +5,7 @@
   import { validateRequired } from "../../common/utils";
   import type { GoAIconType } from "../icon/Icon.svelte";
   import { TABLET_BP } from "../../common/breakpoints";
+  import { isUrlMatch, getMatchedLink } from "../../common/urls";
 
   // Required
   export let heading: string;
@@ -40,36 +41,59 @@
     validateRequired("GoaAppHeaderMenu", { heading });
 
     setCurrentLink();
-    window.addEventListener("popstate", setCurrentLink, true);
+    addEventListener();
   });
 
 
   onDestroy(() => {
     window.removeEventListener("popstate", setCurrentLink, true);
   });
 
+  function addEventListener() {
+    // watch path changes
+    let currentLocation = document.location.href;
+    const observer = new MutationObserver((_mutationList) => {
+      if (isUrlMatch(document.location, currentLocation)) {
+        currentLocation = document.location.href;
+        onRouteChange();
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    window.addEventListener("popstate", onRouteChange, true);
+  }
+
+
   // Functions
 
-  function setCurrentLink() {
-    _hasCurrentLink = hasCurrentLink();
+  // Determine if the current browser url matches one of this element's child links
+  function onRouteChange() {
+    setCurrentLink();
+    closeMenu();
   }
 
-  // Determine if the current browser url matches one of this element's child links
-  function hasCurrentLink(): boolean {
-    if (!_slotParentEl) return false;
+  function setCurrentLink() {
+    if (!_slotParentEl) return;
 
     const slot = _slotParentEl.querySelector("slot") as HTMLSlotElement;
-    if (!slot) return false;
+    if (!slot) return;
+
+    const url = `${window.location.pathname}${window.location.search}${window.location.hash}`;
 
-    const link = slot
+    const links = slot
       .assignedElements()
       .filter((el) => el.tagName === "A")
-      .find((el) => {
-        const href = (el as HTMLLinkElement).href;
-        const url = `${window.location.pathname}${window.location.search}${window.location.hash}`;
-        return href.endsWith(url);
+      .map((el) => {
+        el.classList.remove("current");
+        return el;
       });
-    return !!link;
+
+      const matchedLink = getMatchedLink(links, url);
+      if (matchedLink) {
+        matchedLink.classList.add("current");
+      }
+
+      _hasCurrentLink = !!matchedLink;
   }
 
   // Ensures that the Popover _close event has a handler if the window
@@ -213,6 +237,12 @@
     background: var(--goa-color-greyscale-100);
     color: var(--goa-color-interactive-hover);
   }
+  :global(::slotted(a.current)) {
+    background-color: var(--goa-color-interactive-default);
+  }
+  :global(::slotted(a.current:hover)) {
+    background: var(--goa-color-interactive-hover);
+  }
   :global(::slotted(a:focus-visible)) {
     outline: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
     outline-offset: -3px;

diff --git a/libs/web-components/src/components/app-header/AppHeader.svelte b/libs/web-components/src/components/app-header/AppHeader.svelte
@@ -75,6 +75,7 @@
       });
     if (link) {
       link.classList.add("current");
+      if (_showToggleMenu) link.classList.add("inside-collapse-menu");
     }
   }
 
@@ -302,6 +303,8 @@
   :global(::slotted(a:focus)) {
     outline: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
     outline-offset: calc(-1 * var(--goa-border-width-l));
+    background: var(--goa-color-greyscale-100);
+    color: var(--goa-color-interactive-hover);
   }
   :global(::slotted(a.interactive)) {
     text-decoration: underline;
@@ -424,4 +427,13 @@
     border-color: transparent;
     margin-left: var(--goa-space-m);
   }
+
+  :global(::slotted(a.current.inside-collapse-menu)) {
+    color: var(--goa-color-text-light);
+    background-color: var(--goa-color-interactive-default);
+  }
+
+  :global(::slotted(a.current.inside-collapse-menu:hover)) {
+    background-color: var(--goa-color-interactive-hover);
+  }
 </style>