@gsa-tts/graymatter-ui 0.4.10 → 0.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/components/DesktopHeader.svelte

@@ -5,7 +5,6 @@
     selectedSubNavItemTitle,
   } from '../stores/navigationStore.js';
   import { onMount } from 'svelte';
-  import { subNavReady } from '../stores/subNavReadyStore';
 
   const { customHeaderText = '' } = $props();
 
@@ -16,8 +15,7 @@
       $selectedItem &&
       $selectedItem !== 'discover' &&
       !$isExpanded &&
-      !isLayoutTransitioning &&
-      $subNavReady
+      !isLayoutTransitioning
   );
   const headerText = $derived(
     () => customHeaderText || $selectedSubNavItemTitle

package/src/components/DesktopSideNav.svelte

@@ -11,10 +11,8 @@
     selectedItem,
     isMenuButtonDisabled,
     navigationStore,
-    selectedSubNavItemId,
     type NavigationItem,
   } from '../stores/navigationStore.js';
-  import { get } from 'svelte/store';
   import DiscoverIcon from './icons/DiscoverIcon.svelte';
   import ChatIcon from './icons/ChatIcon.svelte';
   import ConsoleIcon from './icons/ConsoleIcon.svelte';
@@ -38,7 +36,31 @@
   } = $props();
 
   const helpUrl = supplementalMenuData?.help?.url?.trim();
-  const isHelpSelected = $derived(() => get(selectedSubNavItemId) === 'help');
+
+  // Check if we're on the help page by comparing URLs (help is not a nav/subnav item)
+  function getPathname(url: string, baseOrigin: string) {
+    try {
+      return new URL(url, baseOrigin).pathname;
+    } catch {
+      return null;
+    }
+  }
+
+  function checkIsHelpPage(): boolean {
+    if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
+      return false;
+    }
+    const location = (
+      globalThis as { location?: { pathname?: string; origin?: string } }
+    ).location;
+    if (location?.origin && location?.pathname) {
+      const helpPath = getPathname(helpUrl, location.origin);
+      return helpPath !== null && location.pathname === helpPath;
+    }
+    return false;
+  }
+
+  const isHelpSelected = $derived(checkIsHelpPage());
 
   let hydrated = false;
   let navContainer: HTMLDivElement;
@@ -170,38 +192,33 @@
         );
       };
 
+      // Listen for navigation changes to update help button state
+      const handleNavigationChange = () => {
+        // Force reactivity update by accessing the derived value
+        // Accessing isHelpSelected triggers reactivity
+        void isHelpSelected;
+      };
+
+      window.addEventListener('popstate', handleNavigationChange);
+
       return () => {
         window.removeEventListener('layoutTransition', handleLayoutTransition);
         window.removeEventListener('keydown', handleEscape);
+        window.removeEventListener('popstate', handleNavigationChange);
         if (eventListenerCleanup) {
           eventListenerCleanup();
         }
       };
     }
-
-    const location = (
-      globalThis as { location?: { pathname?: string; origin?: string } }
-    ).location;
-    if (helpUrl && location?.origin && location?.pathname) {
-      const helpPath = getPathname(helpUrl, location.origin);
-      if (helpPath && location.pathname === helpPath) {
-        selectedSubNavItemId.set('help');
-      }
-    }
   });
 
-  function getPathname(url: string, baseOrigin: string) {
-    try {
-      return new URL(url, baseOrigin).pathname;
-    } catch {
-      return null;
+  function handleHelpClick(event: MouseEvent) {
+    // If it's a hash link, prevent default to stay on same page
+    if (helpUrl === '#' || helpUrl?.startsWith('#')) {
+      event.preventDefault();
     }
   }
 
-  function handleHelpClick() {
-    selectedSubNavItemId.set('help');
-  }
-
   function toggleNav() {
     if ($isMenuButtonDisabled) return;
     navigationStore.toggleExpanded();
@@ -460,8 +477,8 @@
           >
             <a
               class="help-link"
-              class:selected={isHelpSelected()}
-              aria-current={isHelpSelected()}
+              class:selected={isHelpSelected}
+              aria-current={isHelpSelected ? 'page' : undefined}
               href={helpUrl}
               part="help-link"
               title="Help"
@@ -470,7 +487,7 @@
             >
               <div class="icon-container" part="help-icon-container">
                 <div class="icon-wrapper">
-                  <HelpIcon isSelected={isHelpSelected()} />
+                  <HelpIcon isSelected={isHelpSelected} />
                 </div>
               </div>
             </a>

package/src/components/MobileBottomNav.svelte

@@ -162,7 +162,7 @@
   }
 
   .nav-item.active .icon {
-    background-color: var(--ai-color-neutral-200);
+    background-color: var(--ai-color-steel-300);
     border-radius: var(--ai-size-8);
   }
 

package/src/components/MobileTopNav.svelte

@@ -3,13 +3,11 @@
     isMenuButtonDisabled,
     navigationStore,
     selectedSubNavItemTitle,
-    selectedSubNavItemId,
   } from '../stores/navigationStore.js';
   import Logo from './Logo.svelte';
   import MenuIcon from './icons/MenuIcon.svelte';
   import HelpIcon from './icons/HelpIcon.svelte';
   import { onMount } from 'svelte';
-  import { get } from 'svelte/store';
 
   let { profileMenuData, logoLinkUrl, logoLinkLabel, supplementalMenuData } =
     $props();
@@ -17,14 +15,37 @@
   import ProfileMenu from './ProfileMenu.svelte';
 
   const helpUrl = supplementalMenuData?.help?.url?.trim();
-  const isHelpSelected = $derived(() => get(selectedSubNavItemId) === 'help');
+
+  // Check if we're on the help page by comparing URLs (help is not a nav/subnav item)
+  function getPathname(url: string, baseOrigin: string) {
+    try {
+      return new URL(url, baseOrigin).pathname;
+    } catch {
+      return null;
+    }
+  }
+
+  function checkIsHelpPage(): boolean {
+    if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
+      return false;
+    }
+    const location = (
+      globalThis as {
+        location?: { pathname?: string; origin?: string };
+      }
+    ).location;
+    if (location?.origin && location?.pathname) {
+      const helpPath = getPathname(helpUrl, location.origin);
+      return helpPath !== null && location.pathname === helpPath;
+    }
+    return false;
+  }
+
+  const isHelpSelected = $derived(checkIsHelpPage());
 
   onMount(() => {
     // Listen for section visibility changes to update header
     const handleSectionVisible = (event: Event) => {
-      if (window.innerWidth <= 640) {
-        return;
-      }
       const customEvent = event as CustomEvent;
       if (customEvent.detail && customEvent.detail.title) {
         selectedSubNavItemTitle.set(customEvent.detail.title);
@@ -74,39 +95,29 @@
       }, 100);
     }
 
+    // Listen for navigation changes to update help button state
+    const handleNavigationChange = () => {
+      // Force reactivity update by accessing the derived value
+      void isHelpSelected;
+    };
+
+    window.addEventListener('popstate', handleNavigationChange);
+
     return () => {
       window.removeEventListener('sectionVisible', handleSectionVisible);
+      window.removeEventListener('popstate', handleNavigationChange);
     };
   });
 
-  onMount(() => {
-    const location = (
-      globalThis as {
-        location?: { pathname?: string; origin?: string };
-      }
-    ).location;
-    if (helpUrl && location?.origin && location?.pathname) {
-      const helpPath = getPathname(helpUrl, location.origin);
-      if (helpPath && location.pathname === helpPath) {
-        selectedSubNavItemId.set('help');
-      }
-    }
-  });
-
-  function getPathname(url: string, baseOrigin: string) {
-    try {
-      return new URL(url, baseOrigin).pathname;
-    } catch {
-      return null;
-    }
-  }
-
   function toggleMobileNav() {
     navigationStore.toggleExpanded();
   }
 
-  function handleHelpClick() {
-    selectedSubNavItemId.set('help');
+  function handleHelpClick(event: MouseEvent) {
+    // If it's a hash link, prevent default to stay on same page
+    if (helpUrl === '#' || helpUrl?.startsWith('#')) {
+      event.preventDefault();
+    }
   }
 </script>
 
@@ -137,15 +148,15 @@
   {#if helpUrl}
     <a
       class="help-button"
-      class:selected={isHelpSelected()}
-      aria-current={isHelpSelected()}
+      class:selected={isHelpSelected}
+      aria-current={isHelpSelected ? 'page' : undefined}
       href={helpUrl}
       title="Help"
       aria-label="Help"
       onclick={handleHelpClick}
     >
       <span class="icon-container">
-        <HelpIcon isSelected={isHelpSelected()} />
+        <HelpIcon isSelected={isHelpSelected} />
       </span>
     </a>
   {/if}

package/src/layouts/GlobalAppLayout.astro

@@ -77,6 +77,7 @@ const discover = discoverUrl || '#';
         profileMenuData={profileMenuData}
         logoLinkUrl={logoLinkUrl}
         logoLinkLabel={logoLinkLabel}
+        {supplementalMenuData}
       />
       <MobileSideMenu client:load {logoLinkUrl} {logoLinkLabel}>
         <slot name="sub-nav" />
@@ -87,7 +88,7 @@ const discover = discoverUrl || '#';
         hideDiscover={hideDiscover}
         apiUrl={api}
         chatUrl={chat}
-        consoleUrl={console}
+        consoleUrl={consoleApp}
         discoverUrl={discover}
       />
     </nav>