@gsa-tts/graymatter-ui 0.2.7 → 0.3.0

package/src/components/DesktopSideNav.svelte

@@ -20,7 +20,7 @@
   import MenuIcon from './icons/MenuIcon.svelte';
   import ProfileMenu from './ProfileMenu.svelte';
   import { getAppUrls } from '../utils/getAppUrls';
-  import HelpIcon from './icons/HelpIcon.svelte';
+  // import HelpIcon from './icons/HelpIcon.svelte';
   const urls = getAppUrls();
 
   const {
@@ -33,7 +33,7 @@
     apiUrl,
     chatUrl,
     consoleUrl,
-    discoverUrl
+    discoverUrl,
   } = $props();
 
   let hydrated = false;
@@ -41,7 +41,7 @@
   let hoveredItem = $state<string | null>(null);
   let menuButtonHovered = $state(false);
   let canHover = $state(false);
-  let helpIconHovered = $state(false);
+  // let helpIconHovered = $state(false);
   let discoverNavRef = $state<HTMLAnchorElement | null>(null);
   let chatNavRef = $state<HTMLAnchorElement | null>(null);
   let consoleNavRef = $state<HTMLAnchorElement | null>(null);
@@ -54,22 +54,31 @@
   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)
+    ssrOrHydrated(
+      $isExpanded,
+      ssrSelectedItem ? ssrSelectedItem !== 'discover' : true
+    )
   );
   const menuBtnDisabled = $derived(() =>
-    ssrOrHydrated($isMenuButtonDisabled, ssrSelectedItem ? ssrSelectedItem === 'discover' : false)
+    ssrOrHydrated(
+      $isMenuButtonDisabled,
+      ssrSelectedItem ? ssrSelectedItem === 'discover' : false
+    )
   );
   const menuBtnOpen = $derived(() =>
-    ssrOrHydrated($isExpanded, ssrSelectedItem ? ssrSelectedItem !== 'discover' : true)
+    ssrOrHydrated(
+      $isExpanded,
+      ssrSelectedItem ? ssrSelectedItem !== 'discover' : true
+    )
   );
-  const menuBtnHovered = $derived(() =>
-    canHover && menuButtonHovered && !menuBtnDisabled()
+  const menuBtnHovered = $derived(
+    () => canHover && menuButtonHovered && !menuBtnDisabled()
   );
 
   onMount(() => {
@@ -89,19 +98,19 @@
       mq.addEventListener('change', e => {
         canHover = e.matches;
       });
-      
+
       // Listen for layout transitions
       const handleLayoutTransition = (event: Event) => {
         const customEvent = event as CustomEvent;
         const { isMobile } = customEvent.detail;
-        
+
         if (isMobile) {
           // Switching to mobile: close navigation
           navigationStore.setExpanded(false);
         } else {
           // Switching to desktop: open navigation if on non-discover page
           const currentItem = $selectedItem;
-          
+
           if (currentItem && currentItem !== 'discover') {
             navigationStore.setExpanded(true);
           } else {
@@ -109,9 +118,9 @@
           }
         }
       };
-      
+
       window.addEventListener('layoutTransition', handleLayoutTransition);
-      
+
       // Add Escape key handler for nav collapse, but ignore if focus is in profile context menu
       const handleEscape = (e: KeyboardEvent) => {
         const active = document.activeElement;
@@ -124,7 +133,7 @@
         }
       };
       window.addEventListener('keydown', handleEscape);
-      
+
       return () => {
         window.removeEventListener('layoutTransition', handleLayoutTransition);
         window.removeEventListener('keydown', handleEscape);
@@ -138,62 +147,77 @@
     onNavToggle?.({ expanded: $isExpanded });
   }
 
-  function handleNavItemClick(item: NavigationItem) {    
+  function handleNavItemClick(item: NavigationItem) {
     // Set navigation flag immediately to prevent header restoration
     if (item !== 'discover' && typeof window !== 'undefined') {
       sessionStorage.setItem('navigatingToMainNav', 'true');
     }
-    
+
     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();
-                selectedSubNavItemTitle.set(firstSectionTitle);
-                if (typeof window !== 'undefined') {
-                  sessionStorage.setItem('subNav-selectedTitle', JSON.stringify(firstSectionTitle));
+        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();
+                  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);
-        });
+            }, 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);
-        });
+        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);
+        console.log(
+          '[DesktopSideNav] Import failed for clearing Discover state:',
+          err
+        );
       }
     }
-    
+
     onNavItemClick?.({ item, expanded: $isExpanded });
   }
 
@@ -244,7 +268,9 @@
           onmouseleave={() => (menuButtonHovered = false)}
           onfocus={() => (menuButtonHovered = true)}
           onblur={() => (menuButtonHovered = false)}
-          aria-label={sideNavExpanded() ? 'Close navigation menu' : 'Open navigation menu'}
+          aria-label={sideNavExpanded()
+            ? 'Close navigation menu'
+            : 'Open navigation menu'}
           aria-expanded={sideNavExpanded() ? 'true' : 'false'}
         >
           <div class="icon-container" part="icon-container">
@@ -260,96 +286,109 @@
       </div>
 
       {#if showAppIcons}
-      <div class="nav-items" part="nav-items">
-        <a
-          href={discoverUrl || urls.discover}
-          class="nav-item discover-item"
-          class:selected={isNavSelected('discover')}
-          class:hovered={isNavHovered('discover')}
-          onclick={() => handleNavItemClick('discover')}
-          onkeydown={e => { handleKeyDown(e, 'discover'); handleNavKeyDown(e, 0); }}
-          onmouseenter={() => (hoveredItem = 'discover')}
-          onmouseleave={() => (hoveredItem = null)}
-          aria-current={isNavSelected('discover') ? 'page' : undefined}
-          part="discover-item"
-          bind:this={discoverNavRef}
-        >
-          <div class="icon-container" part="discover-icon-container">
-            <div class="icon-wrapper">
-              <DiscoverIcon isSelected={isNavSelected('discover')} />
+        <div class="nav-items" part="nav-items">
+          <a
+            href={discoverUrl || urls.discover}
+            class="nav-item discover-item"
+            class:selected={isNavSelected('discover')}
+            class:hovered={isNavHovered('discover')}
+            onclick={() => handleNavItemClick('discover')}
+            onkeydown={e => {
+              handleKeyDown(e, 'discover');
+              handleNavKeyDown(e, 0);
+            }}
+            onmouseenter={() => (hoveredItem = 'discover')}
+            onmouseleave={() => (hoveredItem = null)}
+            aria-current={isNavSelected('discover') ? 'page' : undefined}
+            part="discover-item"
+            bind:this={discoverNavRef}
+          >
+            <div class="icon-container" part="discover-icon-container">
+              <div class="icon-wrapper">
+                <DiscoverIcon isSelected={isNavSelected('discover')} />
+              </div>
             </div>
-          </div>
-          <span class="nav-text">Discover</span>
-        </a>
-        <a
-          href={chatUrl || urls.chat}
-          class="nav-item chat-item"
-          class:selected={isNavSelected('chat')}
-          class:hovered={isNavHovered('chat')}
-          onclick={() => handleNavItemClick('chat')}
-          onkeydown={e => { handleKeyDown(e, 'chat'); handleNavKeyDown(e, 1); }}
-          onmouseenter={() => (hoveredItem = 'chat')}
-          onmouseleave={() => (hoveredItem = null)}
-          aria-current={isNavSelected('chat') ? 'page' : undefined}
-          part="chat-item"
-          bind:this={chatNavRef}
-        >
-          <div class="icon-container" part="chat-icon-container">
-            <div class="icon-wrapper">
-              <ChatIcon isSelected={isNavSelected('chat') as boolean} />
+            <span class="nav-text">Discover</span>
+          </a>
+          <a
+            href={chatUrl || urls.chat}
+            class="nav-item chat-item"
+            class:selected={isNavSelected('chat')}
+            class:hovered={isNavHovered('chat')}
+            onclick={() => handleNavItemClick('chat')}
+            onkeydown={e => {
+              handleKeyDown(e, 'chat');
+              handleNavKeyDown(e, 1);
+            }}
+            onmouseenter={() => (hoveredItem = 'chat')}
+            onmouseleave={() => (hoveredItem = null)}
+            aria-current={isNavSelected('chat') ? 'page' : undefined}
+            part="chat-item"
+            bind:this={chatNavRef}
+          >
+            <div class="icon-container" part="chat-icon-container">
+              <div class="icon-wrapper">
+                <ChatIcon isSelected={isNavSelected('chat') as boolean} />
+              </div>
             </div>
-          </div>
-          <span class="nav-text">Chat</span>
-        </a>
-
-        <a
-          href={consoleUrl || urls.console}
-          class="nav-item console-item"
-          class:selected={isNavSelected('console')}
-          class:hovered={isNavHovered('console')}
-          onclick={() => handleNavItemClick('console')}
-          onkeydown={e => { handleKeyDown(e, 'console'); handleNavKeyDown(e, 2); }}
-          onmouseenter={() => (hoveredItem = 'console')}
-          onmouseleave={() => (hoveredItem = null)}
-          aria-current={isNavSelected('console') ? 'page' : undefined}
-          part="console-item"
-          bind:this={consoleNavRef}
-        >
-          <div class="icon-container" part="console-icon-container">
-            <div class="icon-wrapper">
-              <ConsoleIcon isSelected={isNavSelected('console') as boolean} />
+            <span class="nav-text">Chat</span>
+          </a>
+
+          <a
+            href={consoleUrl || urls.console}
+            class="nav-item console-item"
+            class:selected={isNavSelected('console')}
+            class:hovered={isNavHovered('console')}
+            onclick={() => handleNavItemClick('console')}
+            onkeydown={e => {
+              handleKeyDown(e, 'console');
+              handleNavKeyDown(e, 2);
+            }}
+            onmouseenter={() => (hoveredItem = 'console')}
+            onmouseleave={() => (hoveredItem = null)}
+            aria-current={isNavSelected('console') ? 'page' : undefined}
+            part="console-item"
+            bind:this={consoleNavRef}
+          >
+            <div class="icon-container" part="console-icon-container">
+              <div class="icon-wrapper">
+                <ConsoleIcon isSelected={isNavSelected('console') as boolean} />
+              </div>
             </div>
-          </div>
-          <span class="nav-text">Console</span>
-        </a>
-
-        <a
-          href={apiUrl || urls.api}
-          class="nav-item api-item"
-          class:selected={isNavSelected('api')}
-          class:hovered={isNavHovered('api')}
-          onclick={() => handleNavItemClick('api')}
-          onkeydown={e => { handleKeyDown(e, 'api'); handleNavKeyDown(e, 3); }}
-          onmouseenter={() => (hoveredItem = 'api')}
-          onmouseleave={() => (hoveredItem = null)}
-          aria-current={isNavSelected('api') ? 'page' : undefined}
-          part="api-item"
-          bind:this={apiNavRef}
-        >
-          <div class="icon-container" part="api-icon-container">
-            <div class="icon-wrapper">
-              <ApiIcon isSelected={isNavSelected('api')} />
+            <span class="nav-text">Console</span>
+          </a>
+
+          <a
+            href={apiUrl || urls.api}
+            class="nav-item api-item"
+            class:selected={isNavSelected('api')}
+            class:hovered={isNavHovered('api')}
+            onclick={() => handleNavItemClick('api')}
+            onkeydown={e => {
+              handleKeyDown(e, 'api');
+              handleNavKeyDown(e, 3);
+            }}
+            onmouseenter={() => (hoveredItem = 'api')}
+            onmouseleave={() => (hoveredItem = null)}
+            aria-current={isNavSelected('api') ? 'page' : undefined}
+            part="api-item"
+            bind:this={apiNavRef}
+          >
+            <div class="icon-container" part="api-icon-container">
+              <div class="icon-wrapper">
+                <ApiIcon isSelected={isNavSelected('api')} />
+              </div>
             </div>
-          </div>
-          <span class="nav-text">API</span>
-        </a>
-      </div>
+            <span class="nav-text">API</span>
+          </a>
+        </div>
       {/if}
     </div>
 
     {#if profileMenuData}
-    <div class="nav-footer" part="nav-footer">
-      <div class="nav-footer-icon-container">
+      <div class="nav-footer" part="nav-footer">
+        <!-- TODO: Add help icon back in when we have decided on full functionality-->
+        <!-- <div class="nav-footer-icon-container">
         <button
           type="button"
           class="nav-footer-icon-inner"
@@ -364,20 +403,24 @@
             <HelpIcon isHovered={helpIconHovered} />
           </div>
         </button>
+      </div> -->
+        <div class="nav-footer-profile-container">
+          <ProfileMenu
+            userMeta={profileMenuData?.userMeta}
+            menuItems={profileMenuData?.menuItems}
+            ariaLabel="Open profile menu"
+            menuAlign="desktop"
+          />
+        </div>
       </div>
-      <div class="nav-footer-profile-container">
-
-      <ProfileMenu
-        userMeta={profileMenuData?.userMeta}
-        menuItems={profileMenuData?.menuItems}
-        ariaLabel="Open profile menu"
-      />
-      </div>
-    </div>
     {/if}
   </div>
 
-  <div class="expanded-content drawer-anim" class:open={sideNavExpanded()} part="expanded-content">
+  <div
+    class="expanded-content drawer-anim"
+    class:open={sideNavExpanded()}
+    part="expanded-content"
+  >
     {#if sideNavExpanded()}
       <div class="drawer-content" part="drawer-content">
         <nav aria-label="Sub navigation" part="sub-navigation">
@@ -393,8 +436,7 @@
     max-width: 0;
     overflow: hidden;
     pointer-events: none;
-    transition: 
-    max-width 0.2s cubic-bezier(.4, 0, .2, 1);
+    transition: max-width var(--ai-duration-fast) cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .expanded-content.drawer-anim.open {
@@ -424,7 +466,7 @@
     background: none;
     cursor: pointer;
     border-radius: var(--ai-size-8);
-    transition: background-color 0.2s ease;
+    transition: background-color var(--ai-transition-ease-fast);
   }
 
   .menu-button:disabled,
@@ -433,7 +475,7 @@
     opacity: 0.5;
     background-color: transparent;
   }
-  
+
   .side-nav-container {
     display: flex;
     flex-shrink: 0;
@@ -505,7 +547,6 @@
     margin-top: auto;
   }
 
-
   .menu-section {
     display: flex;
     padding: var(--ai-size-4);
@@ -523,7 +564,7 @@
     border: none;
     cursor: pointer;
     opacity: 1;
-    transition: opacity 0.2s ease;
+    transition: opacity var(--ai-transition-ease-fast);
     will-change: opacity;
   }
 
@@ -585,8 +626,9 @@
     flex-shrink: 0;
     position: relative;
     contain: layout style;
-    transition: background-color 0.3s ease,
-    border-radius 0.3s ease;
+    transition:
+      background-color var(--ai-transition-ease-medium),
+      border-radius var(--ai-transition-ease-medium);
   }
 
   .icon-wrapper {
@@ -599,7 +641,7 @@
     aspect-ratio: 1/1;
     position: relative;
     overflow: hidden;
-    transition: transform 0.3s ease;
+    transition: transform var(--ai-transition-ease-medium);
   }
 
   .icon-wrapper :global(svg) {
@@ -610,15 +652,16 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    transition: all 0.3s ease;
+    transition: all var(--ai-transition-ease-medium);
   }
 
   .icon-wrapper :global(svg path) {
     stroke-width: 1.5;
     vector-effect: non-scaling-stroke;
-    transition: stroke 0.3s ease,
-    fill 0.3s ease,
-    stroke-width 0.3s ease;
+    transition:
+      stroke var(--ai-transition-ease-medium),
+      fill var(--ai-transition-ease-medium),
+      stroke-width var(--ai-transition-ease-medium);
   }
 
   .nav-text {
@@ -653,7 +696,7 @@
     padding: var(--ai-size-4);
     text-decoration: none;
     color: var(--ai-color-neutral-600);
-    transition: color 0.2s ease;
+    transition: color var(--ai-transition-ease-fast);
     height: 100%;
   }
 
@@ -661,7 +704,7 @@
     color: var(--ai-color-neutral-700);
   }
 
-  .nav-footer-icon-container {
+  /* .nav-footer-icon-container {
     display: flex;
     padding: 0 var(--ai-size-4);
     flex-direction: column;
@@ -669,7 +712,7 @@
     align-items: center;
     gap: var(--ai-size-4);
     align-self: stretch;
-  }
+  } */
 
   .nav-footer-profile-container {
     display: flex;
@@ -680,7 +723,7 @@
     gap: var(--ai-size-4);
     align-self: stretch;
   }
-  .nav-footer-icon-inner {
+  /* .nav-footer-icon-inner {
     display: flex;
     width: var(--ai-size-40);
     height: var(--ai-size-40);
@@ -691,9 +734,9 @@
     background: none;
     border: none;
     cursor: pointer;
-    transition: background-color 0.3s ease, border-radius 0.3s ease;
-  }
-  .nav-footer-icon-inner:hover,
+    transition: background-color var(--ai-transition-ease-medium), border-radius var(--ai-transition-ease-medium);
+  } */
+  /* .nav-footer-icon-inner:hover,
   .nav-footer-icon-inner:focus {
     background-color: var(--ai-color-steel-300);
     border-radius: var(--ai-size-4);
@@ -713,5 +756,5 @@
     display: flex;
     align-items: center;
     justify-content: center;
-  }
+  } */
 </style>

package/src/components/DesktopSideNav.webcomponent.svelte

@@ -1,6 +1,8 @@
-<svelte:options customElement={{
-  tag: 'graymatter-desktop-side-nav'
-}} />
+<svelte:options
+  customElement={{
+    tag: 'graymatter-desktop-side-nav',
+  }}
+/>
 
 <script lang="ts">
   import DesktopSideNav from './DesktopSideNav.svelte';
@@ -10,12 +12,12 @@
     ssrSelectedItem,
     onNavToggle,
     onNavItemClick,
-    showAppIcons = true, 
+    showAppIcons = true,
     profileMenuData,
     apiUrl,
     chatUrl,
     consoleUrl,
-    discoverUrl
+    discoverUrl,
   } = $props();
 </script>
 

package/src/components/Head.astro

@@ -5,8 +5,30 @@ import { getUrlFromBase } from '@gsa-tts/graymatter-ui/helpers';
 ---
 
 <meta name="viewport" content="width=device-width" />
-<link rel="icon" sizes="any" href=`${getUrlFromBase('favicon.ico')}` />
-<link rel="icon" type="image/svg+xml" href=`${getUrlFromBase('favicon.svg')}` />
+<link
+  rel="icon"
+  sizes="any"
+  href=`${getUrlFromBase('/assets/images/favicon-light.ico')}`
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="icon"
+  type="image/svg+xml"
+  href=`${getUrlFromBase('/assets/images/favicon-light.svg')}`
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="icon"
+  sizes="any"
+  href=`${getUrlFromBase('/assets/images/favicon-dark.ico')}`
+  media="(prefers-color-scheme: dark)"
+/>
+<link
+  rel="icon"
+  type="image/svg+xml"
+  href=`${getUrlFromBase('/assets/images/favicon-dark.svg')}`
+  media="(prefers-color-scheme: dark)"
+/>
 <meta name="generator" content={Astro.generator} />
 <title>{title}</title>
 <script is:inline>