@gsa-tts/graymatter-ui 0.4.10 → 0.4.11

package/package.json

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

package/src/components/DesktopSideNav.svelte

@@ -170,24 +170,45 @@
         );
       };
 
+      // Detect help page and set selection state
+      const checkHelpPage = () => {
+        // Skip check for hash links - they stay on the same page
+        if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
+          return;
+        }
+
+        const location = (
+          globalThis as { location?: { pathname?: string; origin?: string } }
+        ).location;
+        if (location?.origin && location?.pathname) {
+          const helpPath = getPathname(helpUrl, location.origin);
+          if (helpPath && location.pathname === helpPath) {
+            selectedSubNavItemId.set('help');
+          } else if (
+            get(selectedSubNavItemId) === 'help' &&
+            helpPath &&
+            location.pathname !== helpPath
+          ) {
+            // Clear help selection if we navigated away from help page
+            selectedSubNavItemId.set(null);
+          }
+        }
+      };
+
+      checkHelpPage();
+
+      // Also listen for popstate events (back/forward navigation)
+      window.addEventListener('popstate', checkHelpPage);
+
       return () => {
         window.removeEventListener('layoutTransition', handleLayoutTransition);
         window.removeEventListener('keydown', handleEscape);
+        window.removeEventListener('popstate', checkHelpPage);
         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) {
@@ -198,8 +219,15 @@
     }
   }
 
-  function handleHelpClick() {
+  function handleHelpClick(event: MouseEvent) {
     selectedSubNavItemId.set('help');
+
+    // If it's a hash link, prevent default to maintain state on same page
+    if (helpUrl === '#' || helpUrl?.startsWith('#')) {
+      event.preventDefault();
+      // State is already set above, so it will persist
+      return;
+    }
   }
 
   function toggleNav() {

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

@@ -74,25 +74,44 @@
       }, 100);
     }
 
+    // Detect help page and set selection state (aligned with DesktopSideNav logic)
+    const checkHelpPage = () => {
+      // Skip check for hash links - they stay on the same page
+      if (!helpUrl || helpUrl === '#' || helpUrl.startsWith('#')) {
+        return;
+      }
+
+      const location = (
+        globalThis as {
+          location?: { pathname?: string; origin?: string };
+        }
+      ).location;
+      if (location?.origin && location?.pathname) {
+        const helpPath = getPathname(helpUrl, location.origin);
+        if (helpPath && location.pathname === helpPath) {
+          selectedSubNavItemId.set('help');
+        } else if (
+          get(selectedSubNavItemId) === 'help' &&
+          helpPath &&
+          location.pathname !== helpPath
+        ) {
+          // Clear help selection if we navigated away from help page
+          selectedSubNavItemId.set(null);
+        }
+      }
+    };
+
+    checkHelpPage();
+
+    // Also listen for popstate events (back/forward navigation)
+    window.addEventListener('popstate', checkHelpPage);
+
     return () => {
       window.removeEventListener('sectionVisible', handleSectionVisible);
+      window.removeEventListener('popstate', checkHelpPage);
     };
   });
 
-  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;
@@ -105,8 +124,15 @@
     navigationStore.toggleExpanded();
   }
 
-  function handleHelpClick() {
+  function handleHelpClick(event: MouseEvent) {
     selectedSubNavItemId.set('help');
+
+    // If it's a hash link, prevent default to maintain state on same page
+    if (helpUrl === '#' || helpUrl?.startsWith('#')) {
+      event.preventDefault();
+      // State is already set above, so it will persist
+      return;
+    }
   }
 </script>
 

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>