@gsa-tts/graymatter-ui 0.0.2 → 0.1.0

package/index.ts

@@ -2,3 +2,5 @@ export * from './src/components';
 export * from './src/constants';
 export * from './src/helpers';
 export * from './src/component-options';
+export * from './src/stores/navigationStore';
+export * from './src/stores/subNavReadyStore';

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@gsa-tts/graymatter-ui",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
   },
   "exports": {
     ".": "./index.ts",
+    "./stores/navigationStore": "./src/stores/navigationStore.ts",
+    "./stores/subNavReadyStore": "./src/stores/subNavReadyStore.ts",
     "./assets/*": "./assets/*",
     "./astro-config": "./src/astro-config/index.ts",
     "./component-options": "./src/component-options/index.ts",
@@ -45,17 +47,18 @@
     "astro-purgecss": "^5.2.2",
     "eslint": "^9.21.0",
     "gulp": "^5.0.0",
-    "svelte": "^5.28.2",
+    "svelte": "^5.35.4",
     "typescript": "5.7.3",
     "vitest": "^3.0.7",
-    "@gsa-tts/graymatter-eslint": "0.0.1",
+    "vite": "^6.3.5",
     "@gsa-tts/graymatter-typescript-config": "0.0.1",
-    "@gsa-tts/graymatter-vitest-config": "0.0.1"
+    "@gsa-tts/graymatter-vitest-config": "0.0.1",
+    "@gsa-tts/graymatter-eslint": "0.0.1"
   },
   "dependencies": {
     "@fontsource-variable/archivo": "^5.2.6",
     "@uswds/uswds": "3.12.0",
-    "astro": "^5.7.10",
+    "astro": "^5.11.0",
     "slugify": "^1.6.6",
     "@gsa-tts/graymatter-style-tokens": "0.0.2"
   },

package/src/components/DesktopHeader.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+import { selectedItem, isExpanded, selectedSubNavItemTitle } from '../stores/navigationStore.js';
+import Logo from './Logo.svelte';
+import { onMount } from 'svelte';
+import { subNavReady } from '../stores/subNavReadyStore';
+
+const { customHeaderText = '' } = $props();
+
+let isLayoutTransitioning = false;
+
+const showHeader = $derived(() =>
+  $selectedItem && $selectedItem !== 'discover' && !$isExpanded && !isLayoutTransitioning && $subNavReady
+);
+const headerText = $derived(() =>
+  customHeaderText || $selectedSubNavItemTitle
+);
+
+onMount(() => {
+  const handleSectionVisible = (event: Event) => {
+    if (typeof window !== 'undefined' && window.innerWidth <= 640) {
+      return;
+    }
+    let topLevelTitle = null;
+    if (typeof window !== 'undefined') {
+      topLevelTitle = sessionStorage.getItem('subNav-topLevelTitle');
+      if (topLevelTitle) {
+        try {
+          topLevelTitle = JSON.parse(topLevelTitle);
+        } catch {/* ignore parse error */}
+      }
+    }
+    if (typeof topLevelTitle === 'string' && topLevelTitle.trim() !== '') {
+      selectedSubNavItemTitle.set(topLevelTitle);
+      sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(topLevelTitle));
+    } else {
+      const customEvent = event as CustomEvent;
+      if (customEvent.detail && customEvent.detail.title) {
+        selectedSubNavItemTitle.set(customEvent.detail.title);
+        sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(customEvent.detail.title));
+      }
+    }
+  };
+
+  const handleLayoutTransition = (event: Event) => {
+    const customEvent = event as CustomEvent;
+    const { isMobile } = customEvent.detail;
+    if (!isMobile) {
+      isLayoutTransitioning = true;
+      setTimeout(() => {
+        isLayoutTransitioning = false;
+      }, 300);
+    }
+  };
+
+  window.addEventListener('sectionVisible', handleSectionVisible);
+  window.addEventListener('layoutTransition', handleLayoutTransition);
+
+  return () => {
+    window.removeEventListener('sectionVisible', handleSectionVisible);
+    window.removeEventListener('layoutTransition', handleLayoutTransition);
+  };
+});
+</script>
+
+{#if showHeader()}
+  <div class="global-header">
+    <div class="header-content">
+      <Logo width={75} height={22} />
+      <span class="header-text">{headerText()}</span>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .global-header {
+    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+  }
+  
+  /* Optional: Add a subtle slide effect */
+  .global-header {
+    transform: translateY(0);
+  }
+  
+  /* When hiding, we can add a subtle slide up effect */
+  .global-header:not(:defined) {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+</style>

package/src/components/DesktopSideNav.svelte

@@ -0,0 +1,375 @@
+<script lang="ts">
+  /**
+   * Controls which nav item is selected on initial server-side render (SSR) or first paint.
+   * - For the Discover page, set ssrSelectedItem="discover".
+   * - For other pages, set ssrSelectedItem to the corresponding nav key (e.g., "api", "chat", "console").
+   * - If not provided, the navigation will default to expanded/open on SSR.
+   */
+  import { onMount } from 'svelte';
+  import Logo from './Logo.svelte';
+  import {
+    isExpanded,
+    selectedItem,
+    isMenuButtonDisabled,
+    navigationStore,
+    type NavigationItem,
+  } from '../stores/navigationStore.js';
+  import DiscoverIcon from './icons/DiscoverIcon.svelte';
+  import ChatIcon from './icons/ChatIcon.svelte';
+  import ConsoleIcon from './icons/ConsoleIcon.svelte';
+  import ApiIcon from './icons/ApiIcon.svelte';
+  import MenuIcon from './icons/MenuIcon.svelte';
+  
+  const { ssrSelectedItem = undefined, onNavToggle = undefined, onNavItemClick = undefined, onProfileClick = undefined, children } = $props();
+
+  let hydrated = false;
+  let navContainer: HTMLDivElement;
+  let hoveredItem = $state<string | null>(null);
+  let menuButtonHovered = $state(false);
+  let canHover = $state(false);
+
+  function ssrOrHydrated<T>(hydratedValue: T, ssrValue: T): T {
+    return hydrated ? hydratedValue : ssrValue;
+  }
+
+  function isNavSelected(key: NavigationItem) {
+    return ssrOrHydrated($selectedItem === key, ssrSelectedItem === key);
+  }
+  
+  function isNavHovered(key: string) {
+    return hoveredItem === key;
+  }
+
+  const sideNavExpanded = $derived(() =>
+    ssrOrHydrated($isExpanded, ssrSelectedItem ? ssrSelectedItem !== 'discover' : true)
+  );
+  const menuBtnDisabled = $derived(() =>
+    ssrOrHydrated($isMenuButtonDisabled, ssrSelectedItem ? ssrSelectedItem === 'discover' : false)
+  );
+  const menuBtnOpen = $derived(() =>
+    ssrOrHydrated($isExpanded, ssrSelectedItem ? ssrSelectedItem !== 'discover' : true)
+  );
+  const menuBtnHovered = $derived(() =>
+    canHover && menuButtonHovered && !menuBtnDisabled()
+  );
+
+  onMount(() => {
+    hydrated = true;
+    // Remove the CSS class since reactive state takes over
+    document.documentElement.classList.remove('nav-initially-expanded');
+    // Remove the custom property since reactive CSS takes over
+    document.documentElement.style.removeProperty('--initial-main-top-padding');
+    // Add hydrated class to re-enable transitions
+    if (navContainer) {
+      navContainer.classList.add('hydrated');
+    }
+    // Detect if device supports hover (desktop only)
+    if (typeof window !== 'undefined') {
+      const mq = window.matchMedia('(hover: hover)');
+      canHover = mq.matches;
+      mq.addEventListener('change', e => {
+        canHover = e.matches;
+      });
+      
+      // Listen for layout transitions
+      const handleLayoutTransition = (event: Event) => {
+        const customEvent = event as CustomEvent;
+        const { isMobile } = customEvent.detail;
+        console.log('[DesktopSideNav] Layout transition detected:', { isMobile });
+        
+        if (isMobile) {
+          // Switching to mobile: close navigation
+          console.log('[DesktopSideNav] Closing navigation for mobile');
+          navigationStore.setExpanded(false);
+        } else {
+          // Switching to desktop: open navigation if on non-discover page
+          const currentItem = $selectedItem;
+          console.log('[DesktopSideNav] Desktop transition - current item:', currentItem);
+          
+          if (currentItem && currentItem !== 'discover') {
+            console.log('[DesktopSideNav] Opening navigation for desktop (non-discover page)');
+            navigationStore.setExpanded(true);
+          } else {
+            console.log('[DesktopSideNav] Keeping navigation closed for desktop (discover page or no selection)');
+            navigationStore.setExpanded(false);
+          }
+        }
+      };
+      
+      window.addEventListener('layoutTransition', handleLayoutTransition);
+      
+      return () => {
+        window.removeEventListener('layoutTransition', handleLayoutTransition);
+      };
+    }
+  });
+
+  function toggleNav() {
+    if ($isMenuButtonDisabled) return;
+    navigationStore.toggleExpanded();
+    onNavToggle?.({ expanded: $isExpanded });
+  }
+
+  function handleNavItemClick(item: NavigationItem) {
+    console.log('[DesktopSideNav] handleNavItemClick called for:', item, 'at:', Date.now());
+    
+    // Set navigation flag immediately to prevent header restoration
+    if (item !== 'discover' && typeof window !== 'undefined') {
+      sessionStorage.setItem('navigatingToMainNav', 'true');
+      console.log('[DesktopSideNav] Set navigation flag for:', item, 'at:', Date.now());
+    }
+    
+    navigationStore.setSelectedItem(item);
+    
+    // Clear header state for main navigation items (including discover)
+    if (item !== 'discover') {
+      try {
+        import('@gsa-tts/graymatter-ui/stores/navigationStore').then(({ selectedSubNavItemTitle }) => {
+          // Clear the store value immediately
+          selectedSubNavItemTitle.set('');
+          if (typeof window !== 'undefined') {
+            sessionStorage.removeItem('subNav-selectedTitle');
+            sessionStorage.removeItem('subNav-selectedId');
+          }
+          
+          // Set default header from first submenu item after a short delay
+          setTimeout(() => {
+            const mainContent = document.getElementById('main-content');
+            if (mainContent) {
+              const firstSection = mainContent.querySelector('h2[id], h3[id], h4[id], h5[id], h6[id]');
+              if (firstSection && firstSection.textContent) {
+                const firstSectionTitle = firstSection.textContent.trim();
+                console.log('[DesktopSideNav] Setting default header for', item, ':', firstSectionTitle);
+                selectedSubNavItemTitle.set(firstSectionTitle);
+                if (typeof window !== 'undefined') {
+                  sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
+                }
+              }
+            }
+          }, 200); // Delay to ensure page content is loaded
+        }).catch((err) => {
+          console.log('[DesktopSideNav] Error clearing header state:', err);
+        });
+      } catch (err) {
+        console.log('[DesktopSideNav] Import failed for clearing state:', err);
+      }
+    } else {
+      // Clear header state for Discover page
+      try {
+        import('@gsa-tts/graymatter-ui/stores/navigationStore').then(({ selectedSubNavItemTitle }) => {
+          selectedSubNavItemTitle.set('');
+          if (typeof window !== 'undefined') {
+            sessionStorage.removeItem('subNav-selectedTitle');
+            sessionStorage.removeItem('subNav-selectedId');
+          }
+        }).catch((err) => {
+          console.log('[DesktopSideNav] Error clearing header state for Discover:', err);
+        });
+      } catch (err) {
+        console.log('[DesktopSideNav] Import failed for clearing Discover state:', err);
+      }
+    }
+    
+    onNavItemClick?.({ item, expanded: $isExpanded });
+  }
+
+  function handleKeyDown(event: KeyboardEvent, item: NavigationItem) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleNavItemClick(item);
+    }
+  }
+</script>
+
+<div
+  class="side-nav-container"
+  class:expanded={sideNavExpanded()}
+  bind:this={navContainer}
+>
+  <div class="nav-content">
+    <div class="nav-main">
+      <div class="menu-section">
+        <button
+          class="menu-button"
+          class:disabled={$isMenuButtonDisabled}
+          disabled={$isMenuButtonDisabled}
+          onclick={toggleNav}
+          onmouseenter={() => (menuButtonHovered = true)}
+          onmouseleave={() => (menuButtonHovered = false)}
+          aria-label="Open navigation menu"
+        >
+          <span class="sr-only">Open navigation menu</span>
+          <div class="icon-container">
+            <div class="icon-wrapper">
+              <MenuIcon
+              isHovered={menuBtnHovered()}
+              isDisabled={menuBtnDisabled()}
+              isOpen={menuBtnOpen()}
+            />
+            </div>
+          </div>
+        </button>
+      </div>
+
+      <div class="nav-items">
+        <a
+          href="/discover"
+          class="nav-item discover-item"
+          class:selected={isNavSelected('discover')}
+          class:hovered={isNavHovered('discover')}
+          role="button"
+          tabindex="0"
+          onclick={() => handleNavItemClick('discover')}
+          onkeydown={e => handleKeyDown(e, 'discover')}
+          onmouseenter={() => (hoveredItem = 'discover')}
+          onmouseleave={() => (hoveredItem = null)}
+        >
+          <div class="icon-container">
+            <div class="icon-wrapper">
+              <DiscoverIcon isSelected={isNavSelected('discover')} />
+            </div>
+          </div>
+          <span class="nav-text">Discover</span>
+        </a>
+        <a
+          href="/#chat"
+          class="nav-item chat-item"
+          class:selected={isNavSelected('chat')}
+          class:hovered={isNavHovered('chat')}
+          role="button"
+          tabindex="0"
+          onclick={() => handleNavItemClick('chat')}
+          onkeydown={e => handleKeyDown(e, 'chat')}
+          onmouseenter={() => (hoveredItem = 'chat')}
+          onmouseleave={() => (hoveredItem = null)}
+        >
+          <div class="icon-container">
+            <div class="icon-wrapper">
+              <ChatIcon isSelected={isNavSelected('chat') as boolean} />
+            </div>
+          </div>
+          <span class="nav-text">Chat</span>
+        </a>
+
+        <a
+          href="/"
+          class="nav-item console-item"
+          class:selected={isNavSelected('console')}
+          class:hovered={isNavHovered('console')}
+          role="button"
+          tabindex="0"
+          onclick={() => handleNavItemClick('console')}
+          onkeydown={e => handleKeyDown(e, 'console')}
+          onmouseenter={() => (hoveredItem = 'console')}
+          onmouseleave={() => (hoveredItem = null)}
+        >
+          <div class="icon-container">
+            <div class="icon-wrapper">
+              <ConsoleIcon isSelected={isNavSelected('console') as boolean} />
+            </div>
+          </div>
+          <span class="nav-text">Console</span>
+        </a>
+
+        <a
+          href="/api"
+          class="nav-item api-item"
+          class:selected={isNavSelected('api')}
+          class:hovered={isNavHovered('api')}
+          role="button"
+          tabindex="0"
+          onclick={() => handleNavItemClick('api')}
+          onkeydown={e => handleKeyDown(e, 'api')}
+          onmouseenter={() => (hoveredItem = 'api')}
+          onmouseleave={() => (hoveredItem = null)}
+        >
+          <div class="icon-container">
+            <div class="icon-wrapper">
+              <ApiIcon isSelected={isNavSelected('api')} />
+            </div>
+          </div>
+          <span class="nav-text">API</span>
+        </a>
+      </div>
+    </div>
+
+    <div class="nav-footer">
+      <button
+        class="user-profile-button"
+        tabindex="0"
+        onclick={() => onProfileClick?.()}
+        onkeydown={e => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onProfileClick?.();
+          }
+        }}
+      >
+        <div class="user-profile-container">
+          <div class="user-profile-icon">
+            <span class="user-initials">ZW</span>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+
+  <div class="expanded-content drawer-anim" class:open={sideNavExpanded()}>
+    <div class="drawer-content" class:visible={sideNavExpanded()}>
+      <div class="logo-container">
+        <div class="logo-wrapper">
+          <div class="logo-inner">
+            <div class="logo-component padding-left-2">
+              <Logo width={75} height={22} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <nav aria-label="Sub navigation">
+        {@render children?.()}
+      </nav>
+    </div>
+  </div>
+</div>
+
+<style>
+  .expanded-content.drawer-anim {
+    width: 0;
+    min-width: 0;
+    max-width: 0;
+    overflow: hidden;
+    opacity: 0.7;
+    pointer-events: none;
+    transition:
+      width 0.4s cubic-bezier(.4,0,.2,1),
+      min-width 0.4s cubic-bezier(.4,0,.2,1),
+      max-width 0.4s cubic-bezier(.4,0,.2,1),
+      opacity 0.2s;
+  }
+  .expanded-content.drawer-anim.open {
+    width: 12.5rem;
+    min-width: 12.5rem;
+    max-width: 12.5rem;
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .drawer-content {
+    opacity: 0;
+    transform: translateX(-10px);
+    transition:
+      opacity 0.4s 0.20s cubic-bezier(.4,0,.2,1),
+      transform 0.4s 0.20s cubic-bezier(.4,0,.2,1);
+  }
+  .drawer-content.visible {
+    opacity: 1;
+    transform: translateX(0);
+    transition:
+      opacity 0.4s 0.20s cubic-bezier(.4,0,.2,1),
+      transform 0.4s 0.20s cubic-bezier(.4,0,.2,1);
+  }
+  .expanded-content.drawer-anim:not(.open) .drawer-content {
+    transition:
+      opacity 0.20s cubic-bezier(.4,0,.2,1),
+      transform 0.20s cubic-bezier(.4,0,.2,1);
+  }
+</style>

package/src/components/GoogleTagManager.astro

@@ -0,0 +1,16 @@
+---
+let gtmCode = '';
+if (Astro.props.gtmID) {
+  gtmCode = `<!-- Google tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=${Astro.props.gtmID}"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', '${Astro.props.gtmID}');
+  </script>`;
+}
+---
+
+<Fragment set:html={gtmCode} />

package/src/components/Logo.svelte

@@ -2,8 +2,8 @@
   export let isInverted: boolean = false;
   export let width: number | undefined;
   export let height: number | undefined;
-  const defaultWidth = 105;
-  const defaultHeight = 33;
+  const defaultWidth = 102;
+  const defaultHeight = 30;
   width = width || defaultWidth;
   height = height || defaultHeight;
 
@@ -13,7 +13,7 @@
 <svg
   {width}
   {height}
-  viewBox="0 0 105 33"
+  viewBox="0 0 102 30"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
   style="fill: {logoColor};"
@@ -21,14 +21,15 @@
 >
   <g>
     <path
-      d="M13.4937 19.864H26.5932C25.3427 24.7736 21.4655 27.9119 16.5655 27.9119C10.167 27.9119 4.96116 22.7532 4.96116 16.4125C4.96116 10.0717 10.1636 4.91296 16.5621 4.91296C20.1777 4.91296 23.5248 6.53939 25.7437 9.37806L27.2626 11.321L31.184 8.31061L29.665 6.36765C26.4981 2.3201 21.7238 0 16.5621 0C7.43155 0 0 7.36102 0 16.4125C0 25.4639 7.43155 32.8249 16.5621 32.8249C24.9553 32.8249 31.4218 26.4 31.9383 17.5506L32.0913 14.951H13.4937V19.864Z"
+      d="M57.5791 20.4177C57.5791 15.5645 53.7309 11.6187 48.9988 11.6187H40.188C38.6688 11.6187 37.4304 10.3567 37.4304 8.80197C37.4304 7.24729 38.6658 5.98522 40.188 5.98522H56.2373V0H38.8757C34.1466 0 30.2983 3.94877 30.2983 8.80197C30.2983 13.6552 34.1466 17.6039 38.8757 17.6039H47.6865C49.2057 17.6039 50.4442 18.866 50.4442 20.4207C50.4442 21.9754 49.2087 23.2374 47.6865 23.2374H31.0284V29.2197H48.9988C53.7309 29.2197 57.5791 25.2709 57.5791 20.4207V20.4177Z"
     />
     <path
-      d="M52.9238 13.9544H44.0379C41.6559 13.9544 39.7156 12.035 39.7156 9.67113C39.7156 7.30725 41.6559 5.38786 44.0379 5.38786H61.0282V0.478271H44.0379C38.9204 0.478271 34.7578 4.60327 34.7578 9.6745C34.7578 14.7457 38.9204 18.8707 44.0379 18.8707H52.9238C55.3059 18.8707 57.2462 20.7901 57.2462 23.154C57.2462 25.5179 55.3059 27.4373 52.9238 27.4373H35.4V32.3502H52.9238C58.0413 32.3502 62.2039 28.2252 62.2039 23.154C62.2039 18.0828 58.0413 13.9578 52.9238 13.9578V13.9544Z"
+      d="M82.1466 24.7153L82.188 24.7685L83.6747 29.2197H90.6914L80.917 0H68.3525L58.5781 29.2167H65.5949L67.0993 24.7153H82.1466ZM69.186 18.4818L73.3653 5.98522H75.9013L75.919 6.03547L80.1161 18.5793H69.1535L69.186 18.4818Z"
     />
-    <path d="M104.809 0.478271H99.8516V32.3468H104.809V0.478271Z" />
     <path
-      d="M76.2292 0.478271L62.7559 32.3536H68.1316L79.5287 5.39123H79.9874L91.3811 32.3536H96.7568L83.2835 0.478271H76.2292Z"
+      d="M27.198 0H20.5626V15.8158C20.5626 21.4345 16.9626 23.4355 13.5961 23.4355C9.03842 23.4355 6.62956 20.799 6.62956 15.8158V0H0V17.0069C0 20.6985 1.46305 24.0532 4.11724 26.4532C6.64729 28.7409 10.0138 30 13.599 30C20.3586 30 27.198 25.5369 27.198 17.0039V0Z"
     />
+    <path d="M101.708 9.78915H93.8662V29.2197H101.708V9.78915Z" />
+    <path d="M101.823 0H93.8662V5.98227H101.823V0Z" />
   </g>
 </svg>

package/src/components/MobileBottomNav.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  import { selectedItem, navigationStore } from '../stores/navigationStore.js';
+  import type { NavigationItem } from '../stores/navigationStore.js';
+  import DiscoverIcon from './icons/DiscoverIcon.svelte';
+  import ChatIcon from './icons/ChatIcon.svelte';
+  import ConsoleIcon from './icons/ConsoleIcon.svelte';
+  import ApiIcon from './icons/ApiIcon.svelte';
+
+  export let onNavItemClick: ((data: { item: NavigationItem; expanded: boolean }) => void) | undefined = undefined;
+
+  const navItems = [
+    { id: 'discover', label: 'Discover', icon: DiscoverIcon, href: '/discover' },
+    { id: 'chat', label: 'Chat', icon: ChatIcon, href: '/' },
+    { id: 'console', label: 'Console', icon: ConsoleIcon, href: '/' },
+    { id: 'api', label: 'API', icon: ApiIcon, href: '/api' }
+  ] as const;
+
+  function handleNavItemClick(item: NavigationItem) {
+    console.log('[MobileBottomNav] handleNavItemClick called for:', item, 'at:', Date.now());
+    
+    // Set navigation flag immediately to prevent header restoration
+    if (item !== 'discover' && typeof window !== 'undefined') {
+      sessionStorage.setItem('navigatingToMainNav', 'true');
+      console.log('[MobileBottomNav] Set navigation flag for:', item, 'at:', Date.now());
+    }
+    
+    navigationStore.setSelectedItem(item);
+    
+    // Clear header state for main navigation items (including discover)
+    if (item !== 'discover') {
+      try {
+        import('@gsa-tts/graymatter-ui/stores/navigationStore').then(({ selectedSubNavItemTitle }) => {
+          // Clear the store value immediately
+          selectedSubNavItemTitle.set('');
+          if (typeof window !== 'undefined') {
+            sessionStorage.removeItem('subNav-selectedTitle');
+            sessionStorage.removeItem('subNav-selectedId');
+          }
+          
+          // Set default header from first submenu item after a short delay
+          setTimeout(() => {
+            const mainContent = document.getElementById('main-content');
+            if (mainContent) {
+              const firstSection = mainContent.querySelector('h2[id], h3[id], h4[id], h5[id], h6[id]');
+              if (firstSection && firstSection.textContent) {
+                const firstSectionTitle = firstSection.textContent.trim();
+                console.log('[MobileBottomNav] Setting default header for', item, ':', firstSectionTitle);
+                selectedSubNavItemTitle.set(firstSectionTitle);
+                if (typeof window !== 'undefined') {
+                  sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
+                }
+              }
+            }
+          }, 200); // Delay to ensure page content is loaded
+        }).catch((err) => {
+          console.log('[MobileBottomNav] Error clearing header state:', err);
+        });
+      } catch (err) {
+        console.log('[MobileBottomNav] Import failed for clearing state:', err);
+      }
+    } else {
+      // Clear header state for Discover page
+      try {
+        import('@gsa-tts/graymatter-ui/stores/navigationStore').then(({ selectedSubNavItemTitle }) => {
+          selectedSubNavItemTitle.set('');
+          if (typeof window !== 'undefined') {
+            sessionStorage.removeItem('subNav-selectedTitle');
+            sessionStorage.removeItem('subNav-selectedId');
+          }
+        }).catch((err) => {
+          console.log('[MobileBottomNav] Error clearing header state for Discover:', err);
+        });
+      } catch (err) {
+        console.log('[MobileBottomNav] Import failed for clearing Discover state:', err);
+      }
+    }
+    
+    onNavItemClick?.({ item, expanded: false });
+  }
+</script>
+
+<nav class="mobile-bottom-nav">
+  {#each navItems as navItem}
+    <a
+      href={navItem.href}
+      class="nav-item"
+      class:active={$selectedItem === navItem.id}
+      on:click={() => handleNavItemClick(navItem.id)}
+    >
+      <div class="icon">
+        <svelte:component 
+          this={navItem.icon} 
+          isActive={$selectedItem === navItem.id}
+        />
+      </div>
+      <span class="label">{navItem.label}</span>
+    </a>
+  {/each}
+</nav>