@gsa-tts/graymatter-ui 0.0.2 → 0.2.0

package/src/components/DesktopSideNav.svelte

@@ -0,0 +1,645 @@
+<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 {
+    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';
+  import { getAppUrls } from '../utils/getAppUrls';
+  const urls = getAppUrls();
+  
+  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;
+        
+        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 {
+            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) {    
+    // 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));
+                }
+              }
+            }
+          }, 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}
+  part="side-nav-container"
+>
+  <div class="nav-content">
+    <div class="nav-main" part="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" part="nav-items">
+        <a
+          href={urls.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={urls.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={urls.console}
+          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={urls.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" part="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" part="user-profile-icon">
+            <span class="user-initials">ZW</span>
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+
+  <div class="expanded-content drawer-anim" class:open={sideNavExpanded()} part="expanded-content">
+    {#if sideNavExpanded()}
+      <div class="drawer-content" part="drawer-content">
+        <div class="logo-placeholder"></div>
+        <nav aria-label="Sub navigation">
+          {@render children?.()}
+        </nav>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .expanded-content.drawer-anim {
+    max-width: 0;
+    overflow: hidden;
+    pointer-events: none;
+    transition: 
+    max-width 0.2s cubic-bezier(.4, 0, .2, 1);
+  }
+
+  .expanded-content.drawer-anim.open {
+    max-width: 12.5rem;
+    pointer-events: auto;
+  }
+
+  .drawer-content {
+    width: 12.5rem;
+    height: 100%;
+  }
+
+  .logo-placeholder {
+    height: var(--ai-size-72);
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+    white-space: nowrap;
+  }
+
+  .user-profile-container,
+  .user-profile-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .menu-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    cursor: pointer;
+    border-radius: var(--ai-size-8);
+    transition: background-color 0.2s ease;
+  }
+
+  .menu-button:disabled,
+  .menu-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: transparent;
+  }
+
+  .user-profile-icon {
+    border-radius: var(--ai-size-6);
+    background: var(--ai-color-steel-700);
+  }
+
+  .user-initials {
+    color: var(--ai-color-white);
+    text-align: center;
+    font-weight: 400;
+    line-height: 1.3;
+  }
+  
+  .side-nav-container {
+    display: flex;
+    flex-shrink: 0;
+    position: relative;
+    z-index: var(--ai-layer-2);
+    height: 100%;
+  }
+
+  .side-nav-container.expanded {
+    width: 16.875rem;
+    min-width: 12.5rem;
+    max-width: 16.875rem;
+    height: 100%;
+  }
+
+  .expanded-content {
+    display: flex;
+    width: 12.5rem;
+    opacity: 1;
+    flex: none;
+    height: 100%;
+    background: var(--ai-color-steel-100);
+    border-right: 0.0625rem solid var(--ai-color-steel-100);
+    overflow: hidden;
+    flex-direction: column;
+  }
+
+  .side-nav-container.expanded .expanded-content {
+    width: 12.5rem;
+    opacity: 1;
+    overflow-y: auto;
+  }
+
+  .side-nav-container:not(.expanded) .expanded-content {
+    width: 0;
+    opacity: 0;
+  }
+
+  .nav-content {
+    display: flex;
+    width: var(--ai-size-72);
+    height: 100%;
+    padding-bottom: var(--ai-size-16);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-size-4);
+    flex: none;
+    background: var(--ai-color-steel-200);
+    border-right: 0.0625rem solid var(--ai-color-steel-200);
+  }
+
+  .nav-main {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-size-4);
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+
+  .nav-footer {
+    display: flex;
+    padding: var(--ai-size-8) var(--ai-size-4);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--ai-size-4);
+    align-self: stretch;
+    margin-top: auto;
+  }
+
+  .user-profile-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .user-profile-button:focus {
+    outline: var(--ai-size-2) solid var(--ai-color-blue-600);
+    outline-offset: var(--ai-size-2);
+    border-radius: var(--ai-size-4);
+  }
+
+  .user-profile-container {
+    width: var(--ai-size-40);
+    height: var(--ai-size-40);
+    aspect-ratio: 1/1;
+  }
+
+  .user-profile-icon {
+    padding: 0.5556rem 0.4931rem 0.5694rem 0.3819rem;
+  }
+
+  .user-initials {
+    font-size: var(--ai-size-16);
+    font-style: normal;
+  }
+
+  .menu-section {
+    display: flex;
+    padding: var(--ai-size-4);
+    justify-content: center;
+    align-items: center;
+    align-self: stretch;
+  }
+
+  .menu-button {
+    display: flex;
+    padding: var(--ai-size-4);
+    justify-content: center;
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    opacity: 1;
+    transition: opacity 0.2s ease;
+    will-change: opacity;
+  }
+
+  .menu-button.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    will-change: opacity;
+  }
+
+  .menu-button:focus,
+  .nav-item:focus {
+    outline: none;
+  }
+
+  .menu-button:focus .icon-container,
+  .nav-item:focus .icon-container {
+    outline: var(--ai-size-2) solid var(--ai-color-blue-600);
+    outline-offset: var(--ai-size-2);
+    border-radius: var(--ai-size-4);
+  }
+
+  .nav-items {
+    display: flex;
+    width: var(--ai-size-72);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--ai-size-4);
+  }
+
+  .nav-item {
+    display: flex;
+    height: 4.125rem;
+    padding: var(--ai-size-4);
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--ai-size-2);
+    align-self: stretch;
+    cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  .icon-container {
+    display: flex;
+    width: var(--ai-size-40);
+    height: var(--ai-size-40);
+    padding: var(--ai-size-8);
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    position: relative;
+    contain: layout style;
+    transition: background-color 0.3s ease,
+    border-radius 0.3s ease;
+  }
+
+  .icon-wrapper {
+    display: flex;
+    width: var(--ai-size-28);
+    height: var(--ai-size-28);
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    aspect-ratio: 1/1;
+    position: relative;
+    overflow: hidden;
+    transition: transform 0.3s ease;
+  }
+
+  .icon-wrapper :global(svg) {
+    width: var(--ai-size-24);
+    height: var(--ai-size-24);
+    flex-shrink: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: all 0.3s ease;
+  }
+
+  .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;
+  }
+
+  .nav-text {
+    font-size: var(--ai-size-12);
+    text-align: center;
+    color: var(--ai-color-neutral-900);
+    line-height: 1.3;
+  }
+
+  .menu-button.disabled:hover .icon-container,
+  .menu-button:disabled:hover .icon-container {
+    background: none !important;
+    border-radius: var(--ai-size-4);
+  }
+
+  .nav-item.hovered .icon-container,
+  .nav-item:active .icon-container,
+  .nav-item.selected .icon-container,
+  .nav-item.selected.hovered .icon-container,
+  .menu-button:hover .icon-container,
+  .menu-button:active .icon-container {
+    background-color: var(--ai-color-steel-300);
+    border-radius: var(--ai-size-4);
+  }
+
+  .nav-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: var(--ai-size-4);
+    text-decoration: none;
+    color: var(--ai-color-neutral-600);
+    transition: color 0.2s ease;
+    height: 100%;
+  }
+
+  .nav-item:hover {
+    color: var(--ai-color-neutral-700);
+  }
+
+</style>

package/src/components/DesktopSideNav.webcomponent.svelte

@@ -0,0 +1,19 @@
+<svelte:options customElement={{
+  tag: 'graymatter-desktop-side-nav'
+}} />
+
+<script lang="ts">
+  import DesktopSideNav from './DesktopSideNav.svelte';
+
+  // Props for the web component
+  let { ssrSelectedItem, onNavToggle, onNavItemClick, onProfileClick } = $props();
+</script>
+
+<DesktopSideNav
+  {ssrSelectedItem}
+  {onNavToggle}
+  {onNavItemClick}
+  {onProfileClick}
+>
+  <slot />
+</DesktopSideNav>

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} />