@gsa-tts/graymatter-ui 0.0.2 → 0.1.0

package/src/stores/navigationStore.ts

@@ -0,0 +1,153 @@
+// Store for selected subnav item id and title (for all apps)
+import { writable, type Writable, derived } from 'svelte/store';
+
+export type NavigationItem = 'discover' | 'chat' | 'console' | 'api' | null;
+
+const browser = typeof window !== 'undefined';
+
+// Persistent subnav item id and title in sessionStorage
+function getSessionValue<T>(key: string, defaultValue: T): T {
+  if (browser && typeof sessionStorage !== 'undefined') {
+    const stored = sessionStorage.getItem(key);
+    if (stored !== null) {
+      try {
+        return JSON.parse(stored) as T;
+      } catch (e) {
+        console.warn(`Failed to parse stored value for ${key}:`, e);
+        return defaultValue;
+      }
+    }
+  }
+  return defaultValue;
+}
+
+function createSessionStore<T>(key: string, defaultValue: T): Writable<T> {
+  const initialValue = getSessionValue(key, defaultValue);
+  const store = writable<T>(initialValue);
+
+  if (browser) {
+    store.subscribe((value: T) => {
+      try {
+        sessionStorage.setItem(key, JSON.stringify(value));
+      } catch (e) {
+        console.warn(`Failed to persist ${key} to sessionStorage:`, e);
+      }
+    });
+  }
+
+  return store;
+}
+
+export const selectedSubNavItemId: Writable<string | null> = createSessionStore(
+  'subNav-selectedId',
+  null
+);
+export const selectedSubNavItemTitle: Writable<string | null> =
+  createSessionStore('subNav-selectedTitle', '');
+
+function getInitialValue<T>(key: string, defaultValue: T): T {
+  if (browser && typeof localStorage !== 'undefined') {
+    const stored = localStorage.getItem(key);
+    if (stored !== null) {
+      try {
+        return JSON.parse(stored) as T;
+      } catch (e) {
+        console.warn(`Failed to parse stored value for ${key}:`, e);
+        return defaultValue;
+      }
+    }
+  }
+  return defaultValue;
+}
+
+function createPersistentStore<T>(key: string, defaultValue: T): Writable<T> {
+  const initialValue = getInitialValue(key, defaultValue);
+  const store = writable<T>(initialValue);
+
+  if (browser) {
+    store.subscribe((value: T) => {
+      try {
+        localStorage.setItem(key, JSON.stringify(value));
+      } catch (e) {
+        console.warn(`Failed to persist ${key} to localStorage:`, e);
+      }
+    });
+  }
+
+  return store;
+}
+
+export const isExpanded: Writable<boolean> = createPersistentStore(
+  'globalSideNav-isExpanded',
+  false
+);
+export const selectedItem: Writable<NavigationItem> = createPersistentStore(
+  'globalSideNav-selectedItem',
+  null
+);
+
+// Derived store to determine if menu button should be disabled
+export const isMenuButtonDisabled = derived(
+  selectedItem,
+  $selectedItem => $selectedItem === 'discover'
+);
+
+export interface NavigationStore {
+  toggleExpanded: () => void;
+  setExpanded: (value: boolean) => void;
+  setSelectedItem: (item: NavigationItem) => void;
+  handleLayoutTransition: (isMobile: boolean) => void;
+}
+
+export const navigationStore: NavigationStore = {
+  toggleExpanded: (): void => {
+    isExpanded.update((expanded: boolean) => !expanded);
+  },
+
+  setExpanded: (value: boolean): void => {
+    isExpanded.set(value);
+  },
+
+  setSelectedItem: (item: NavigationItem): void => {
+    selectedItem.set(item);
+    if (item === 'discover') {
+      isExpanded.set(false);
+    } else {
+      // For non-discover items (API, Console, Chat), ALWAYS expand on desktop
+      if (browser && window.innerWidth > 640) {
+        isExpanded.set(true);
+      }
+    }
+  },
+
+  handleLayoutTransition: (isMobile: boolean): void => {
+    console.log('[NavigationStore] handleLayoutTransition called:', {
+      isMobile,
+    });
+
+    if (isMobile) {
+      // Switching to mobile: always close navigation
+      console.log('[NavigationStore] Closing navigation for mobile');
+      isExpanded.set(false);
+    } else {
+      // Switching to desktop: open navigation if on non-discover page
+      const currentItem = getInitialValue('globalSideNav-selectedItem', null);
+      console.log(
+        '[NavigationStore] Desktop transition - current item:',
+        currentItem
+      );
+
+      if (currentItem && currentItem !== 'discover') {
+        console.log(
+          '[NavigationStore] Opening navigation for desktop (non-discover page)'
+        );
+        isExpanded.set(true);
+      } else {
+        console.log(
+          '[NavigationStore] Keeping navigation closed for desktop (discover page or no selection)'
+        );
+        isExpanded.set(false);
+      }
+    }
+  },
+};

package/src/stores/subNavReadyStore.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const subNavReady = writable(false);

package/src/styles/base/global.css

@@ -1,4 +1,4 @@
-@layer designsystem, theme, buttons;
+@layer designsystem, theme, buttons, appnav, applayout;
 @import '../../../static/uswds/styles/styles.css' layer(designsystem);
 @import '../../../node_modules/@gsa-tts/graymatter-style-tokens/dist/css/variables.css'
   layer(theme);
@@ -6,3 +6,10 @@
 @import 'typography.css' layer(theme);
 @import '../utilities/layout.css' layer(theme);
 @import '../components/heroCards.css' layer(theme);
+@import '../components/globalAppNav.css' layer(appnav);
+@import '../components/globalAppLayout.css' layer(applayout);
+
+/* Ensure anchor targets are not hidden behind fixed header */
+[id] {
+  scroll-margin-top: 56px;
+}

package/src/styles/base/typography.css

@@ -9,43 +9,44 @@
 
 h1,
 .ai-heading-size-1 {
-  font-size: clamp(var(--ai-size-36), 5vw, var(--ai-size-48));
+  font-size: clamp(var(--ai-size-30), 5vw, var(--ai-size-32));
   font-weight: var(--ai-font-weight-semibold);
-  margin-bottom: var(--ai-size-24);
+  margin-bottom: var(--ai-size-20);
 }
 
 h2,
 .ai-heading-size-2 {
-  font-size: clamp(var(--ai-size-32), 5vw, var(--ai-size-36));
-  margin-bottom: var(--ai-size-20);
+  font-size: var(--ai-size-26);
+  font-weight: var(--ai-font-weight-semibold);
+  margin-bottom: var(--ai-size-16);
 }
 
 h3,
 .ai-heading-size-3 {
-  font-size: clamp(var(--ai-size-28), 5vw, var(--ai-size-32));
-  font-weight: var(--ai-font-weight-normal);
-  margin-bottom: var(--ai-size-18);
+  font-size: var(--ai-size-24);
+  font-weight: var(--ai-font-weight-semibold);
+  margin-bottom: var(--ai-size-16);
 }
 
 h4,
 .ai-heading-size-4 {
-  font-size: var(--ai-size-24);
-  font-weight: var(--ai-font-weight-normal);
-  margin-bottom: var(--ai-size-16);
+  font-size: var(--ai-size-22);
+  font-weight: var(--ai-font-weight-semibold);
+  margin-bottom: var(--ai-size-10);
 }
 
 h5,
 .ai-heading-size-5 {
   font-size: var(--ai-size-22);
   font-weight: var(--ai-font-weight-normal);
-  margin-bottom: var(--ai-size-12);
+  margin-bottom: var(--ai-size-10);
 }
 
 h6,
 .ai-heading-size-6 {
-  font-size: var(--ai-size-20);
-  font-weight: var(--ai-font-weight-normal);
-  margin-bottom: var(--ai-size-8);
+  font-size: var(--ai-size-18);
+  font-weight: var(--ai-font-weight-semibold);
+  margin-bottom: var(--ai-size-6);
 }
 
 pre {

package/src/styles/components/globalAppLayout.css

@@ -0,0 +1,76 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.main-content-mobile {
+  flex: 1;
+  padding: var(--initial-main-top-padding, calc(3.5rem + 1rem)) 1rem
+    var(--initial-main-bottom-padding, calc(5rem + 1rem)) 1rem;
+  overflow-y: auto;
+  display: block;
+}
+
+.layout-container {
+  display: none;
+}
+
+.main-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.app main {
+  flex: 1;
+  padding: var(--initial-main-top-padding, calc(3.5rem + 1rem)) 1rem
+    var(--initial-main-bottom-padding, calc(5rem + 1rem)) 1rem;
+  overflow-y: auto;
+}
+
+@media (--ai-size-breakpoint-tablet) {
+  .main-content-mobile {
+    display: none;
+  }
+  .layout-container {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    flex-direction: row;
+  }
+  .side-nav-container {
+    display: flex;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 2;
+  }
+  .side-nav-container.expanded {
+    width: 12.5rem;
+    min-width: 12.5rem;
+    max-width: 12.5rem;
+  }
+  .main-container {
+    flex: 1 1 0%;
+    min-width: 0;
+    position: relative;
+    z-index: 1;
+  }
+  .app main {
+    padding: var(--ai-size-40) var(--ai-size-32) var(--ai-size-8) 4.875rem;
+  }
+
+  :global(.side-nav-container.expanded) ~ .main-container main {
+    padding-top: var(--ai-size-8);
+  }
+  :global(.side-nav-container),
+  :global(.side-nav-container .expanded-content) {
+    transition: none;
+  }
+  :global(body) {
+    overflow-y: hidden;
+    height: 100%;
+  }
+}