@gsa-tts/graymatter-ui 0.3.6 → 0.3.8

package/package.json

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

package/src/components/DesktopSideNav.svelte

@@ -28,6 +28,7 @@
     onNavItemClick = undefined,
     children,
     showAppIcons = true,
+    hideDiscover = true,
     profileMenuData,
     apiUrl,
     chatUrl,
@@ -143,8 +144,9 @@
       window.addEventListener('keydown', handleEscape);
 
       // Custom event system for external control
-      const handleDesktopNavControlEvent = (event: CustomEvent) => {
-        const { action, isOpen: eventIsOpen } = event.detail;
+      const handleDesktopNavControlEvent = (event: Event) => {
+        const customEvent = event as CustomEvent;
+        const { action, isOpen: eventIsOpen } = customEvent.detail;
 
         if (action === 'toggle') {
           navigationStore.toggleExpanded();
@@ -208,19 +210,21 @@
 
             // 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)
-                    );
+              if (typeof document !== 'undefined') {
+                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)
+                      );
+                    }
                   }
                 }
               }
@@ -327,29 +331,31 @@
 
       {#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')} />
+          {#if !hideDiscover}
+            <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>
+              <span class="nav-text">Discover</span>
+            </a>
+          {/if}
           <a
             href={chatUrl || urls.chat}
             class="nav-item chat-item"

package/src/components/DesktopSideNav.webcomponent.svelte

@@ -13,6 +13,7 @@
     onNavToggle,
     onNavItemClick,
     showAppIcons = true,
+    hideDiscover = true,
     profileMenuData,
     apiUrl,
     chatUrl,
@@ -27,6 +28,7 @@
   {onNavToggle}
   {onNavItemClick}
   {showAppIcons}
+  {hideDiscover}
   {profileMenuData}
   {apiUrl}
   {chatUrl}

package/src/components/Head.astro

@@ -10,7 +10,6 @@ const defaultDescription =
   'Accelerating trusted AI adoption across government. Three powerful AI tools. Industry-leading models. One integrated platform.';
 const defaultOgImage = getUrlFromBase('/common/assets/images/og-preview.webp');
 
-const pageTitle = `${title} | USAi`;
 const ogTitle = title || siteName;
 const ogDescription = description || defaultDescription;
 const ogImage = openGraphImage || defaultOgImage;
@@ -19,7 +18,7 @@ const canonicalUrl = new URL(Astro.url.pathname, siteUrl).href;
 ---
 
 <meta name="viewport" content="width=device-width" />
-<title>{pageTitle}</title>
+<title>{title}</title>
 <script is:inline>
   if ('performance' in window) {
     performance.mark('usai:documenthead:start');

package/src/components/MobileBottomNav.svelte

@@ -11,6 +11,7 @@
   let {
     onNavItemClick,
     showAppIcons = true,
+    hideDiscover = true,
     apiUrl,
     chatUrl,
     consoleUrl,
@@ -21,6 +22,7 @@
       expanded: boolean;
     }) => void;
     showAppIcons: boolean;
+    hideDiscover: boolean;
     apiUrl?: string;
     chatUrl?: string;
     consoleUrl?: string;
@@ -33,7 +35,7 @@
       ? { api: '#', chat: '#', console: '#', discover: '#' }
       : getAppUrls();
 
-  const navItems = [
+  const allNavItems = [
     {
       id: 'discover',
       label: 'Discover',
@@ -50,6 +52,11 @@
     { id: 'api', label: 'API', icon: ApiIcon, href: apiUrl || urls.api },
   ] as const;
 
+  // Filter out discover item if hideDiscover is true
+  const navItems = hideDiscover
+    ? allNavItems.filter(item => item.id !== 'discover')
+    : allNavItems;
+
   function handleNavItemClick(item: NavigationItem) {
     // Set navigation flag immediately to prevent header restoration
     if (item !== 'discover' && typeof window !== 'undefined') {

package/src/components/MobileBottomNav.webcomponent.svelte

@@ -11,6 +11,7 @@
   let {
     onNavItemClick,
     showAppIcons = true,
+    hideDiscover = true,
     apiUrl,
     chatUrl,
     consoleUrl,
@@ -21,6 +22,7 @@
 <MobileBottomNav
   {onNavItemClick}
   {showAppIcons}
+  {hideDiscover}
   {apiUrl}
   {chatUrl}
   {consoleUrl}

package/src/components/MobileSideMenu.svelte

@@ -6,7 +6,7 @@
     navigationStore,
   } from '../stores/navigationStore.js';
   import Logo from './Logo.svelte';
-  import CloseIcon from './icons/CloseIcon.svelte';
+  import MenuIcon from './icons/MenuIcon.svelte';
 
   let sideMenuElement: HTMLDivElement;
   let pendingMobileHash: string | null = null;
@@ -152,6 +152,14 @@
   part="mobile-side-menu"
 >
   <div class="menu-header" part="menu-header">
+    <button
+      class="close-button"
+      onclick={closeMobileMenu}
+      aria-label="Close navigation menu"
+      part="close-button"
+    >
+      <MenuIcon isOpen={true} />
+    </button>
     <div class="logo-container" part="logo-container">
       {#if logoLinkUrl}
         <a
@@ -166,14 +174,6 @@
         <Logo width={75} height={22} />
       {/if}
     </div>
-    <button
-      class="close-button"
-      onclick={closeMobileMenu}
-      aria-label="Close navigation menu"
-      part="close-button"
-    >
-      <CloseIcon />
-    </button>
   </div>
 
   <div class="menu-content" part="menu-content">
@@ -208,9 +208,9 @@
     top: 0;
     left: 0;
     bottom: 0;
-    width: 15rem;
+    width: 80%;
     max-width: 85vw;
-    background: var(--ai-color-white);
+    background: var(--ai-color-steel-50);
     transform: translateX(-100%);
     transition: transform var(--ai-transition-ease-medium);
     z-index: var(--ai-layer-50);
@@ -225,9 +225,8 @@
   .menu-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: var(--ai-size-16) var(--ai-size-20);
-    border-bottom: 0.0625rem solid var(--ai-color-neutral-200);
+    padding: var(--ai-size-16);
+    gap: var(--ai-size-16);
   }
 
   .mobile-side-menu .logo-container {
@@ -242,13 +241,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--ai-size-32);
-    height: var(--ai-size-32);
+    padding: 0;
     border: none;
     background: none;
     color: var(--ai-color-neutral-700);
     cursor: pointer;
-    border-radius: var(--ai-size-6);
+    border-radius: var(--ai-size-2);
     transition: background-color var(--ai-transition-ease-fast);
   }
 
@@ -263,7 +261,6 @@
   }
 
   .subnav-section {
-    padding: var(--ai-size-16) 0;
     overflow-y: auto;
     max-height: calc(100vh - 4rem); /* leave space for header/close */
   }

package/src/components/MobileTopNav.svelte

@@ -131,7 +131,7 @@
   }
 
   .mobile-top-nav .menu-button {
-    width: var(--ai-size-40);
+    padding: 0;
     height: var(--ai-size-40);
     color: var(--ai-color-neutral-700);
   }

package/src/components/icons/CloseIcon.svelte

@@ -3,14 +3,14 @@
 
 <svg
   xmlns="http://www.w3.org/2000/svg"
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
   fill="none"
 >
   <path
-    d="M6 18L18 6M6 6L18 18"
-    stroke="#585C63"
+    d="M2 18L18 2M2 2L18 18"
+    stroke="black"
     stroke-width="1.5"
     stroke-linecap="round"
     stroke-linejoin="round"

package/src/helpers/meta.ts

@@ -1,6 +1,5 @@
 import type { AstroGlobal } from 'astro';
-import { siteName } from '@gsa-tts/graymatter-ui/constants';
 
 export const getPageTitle = (astro: Pick<AstroGlobal, 'props'>): string => {
-  return astro.props?.title || siteName;
+  return astro.props?.title ? `${astro.props?.title} | USAi` : 'USAi';
 };

package/src/styles/components/globalAppLayout.css

@@ -56,7 +56,7 @@
     z-index: var(--ai-layer-1);
   }
   .app main {
-    padding: var(--ai-size-40) var(--ai-size-32) var(--ai-size-8) 4.875rem;
+    padding: var(--ai-size-40) var(--ai-size-16) var(--ai-size-8) 1rem;
   }
 
   :global(.side-nav-container.expanded) ~ .main-container main {
@@ -71,3 +71,9 @@
     height: 100%;
   }
 }
+
+@media (--ai-size-breakpoint-desktop) {
+  .app main {
+    padding: var(--ai-size-40) var(--ai-size-32) var(--ai-size-8) 4.875rem;
+  }
+}