@gsa-tts/graymatter-ui 0.0.2 → 0.1.0

package/src/layouts/GlobalAppLayout.astro

@@ -0,0 +1,585 @@
+---
+import BaseLayout from '@gsa-tts/graymatter-ui/layouts/BaseLayout.astro';
+import '../styles/base/global.css';
+import { getPageTitle } from '@gsa-tts/graymatter-ui/helpers';
+import UsaBanner from '../components/UsaBanner.astro';
+import DesktopSideNav from '../components/DesktopSideNav.svelte';
+import DesktopHeader from '../components/DesktopHeader.svelte';
+import MobileTopNav from '../components/MobileTopNav.svelte';
+import MobileBottomNav from '../components/MobileBottomNav.svelte';
+import MobileSideMenu from '../components/MobileSideMenu.svelte';
+
+const { componentOptions = {}, ssrSelectedItem, gtmID } = Astro.props;
+
+const title = getPageTitle(Astro);
+---
+
+<BaseLayout title={title} gtmID={gtmID}>
+  <div class="app">
+    <div class="banner">
+      <UsaBanner isInverted={componentOptions.usaBanner?.theme === 'inverse'} />
+    </div>
+    <!-- Mobile Navigation -->
+    <MobileTopNav client:load />
+    <MobileSideMenu client:load>
+      <slot name="sub-nav" />
+    </MobileSideMenu>
+    <MobileBottomNav client:load />
+
+    <!-- Desktop Navigation -->
+    <div class="layout-container">
+      <DesktopSideNav client:load ssrSelectedItem={ssrSelectedItem}>
+        <slot name="sub-nav" />
+      </DesktopSideNav>
+      <div class="main-container">
+        <DesktopHeader client:load />
+        <main id="main-content">
+          <slot />
+        </main>
+      </div>
+    </div>
+
+    <!-- Mobile Main Content -->
+    <main
+      id="main-content-mobile"
+      class="main-content-mobile"
+    >
+      <slot />
+    </main>
+  </div>
+</BaseLayout>
+
+<script is:inline>
+  if (typeof window !== 'undefined') {
+    // Handle URL hash scrolling immediately to prevent initial render at top
+    if (window.location.hash) {
+      const anchor = window.location.hash.substring(1);
+
+      // Set a flag to prevent SubNavMenu from also scrolling
+      sessionStorage.setItem('globalLayoutScrolling', 'true');
+
+      // Use requestAnimationFrame to scroll as early as possible
+      requestAnimationFrame(() => {
+        if (window.innerWidth <= 640) {
+          // Mobile: scroll in mobile content container
+          const mobileContent = document.getElementById('main-content-mobile');
+          if (mobileContent) {
+            const mobileAnchor = mobileContent.querySelector(
+              `[id="${anchor}"]`
+            );
+            if (mobileAnchor) {
+              const rect = mobileAnchor.getBoundingClientRect();
+              const mobileRect = mobileContent.getBoundingClientRect();
+              const scrollTop =
+                mobileContent.scrollTop + rect.top - mobileRect.top;
+              console.log(
+                '[GlobalAppLayout] Immediate mobile scroll to:',
+                scrollTop
+              );
+              mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
+
+              setTimeout(() => {
+                let topLevelTitle = null;
+                if (typeof window !== 'undefined') {
+                  topLevelTitle = sessionStorage.getItem(
+                    'subNav-topLevelTitle'
+                  );
+                  if (topLevelTitle) {
+                    try {
+                      topLevelTitle = JSON.parse(topLevelTitle);
+                    } catch {}
+                  }
+                }
+                window.dispatchEvent(
+                  new CustomEvent('sectionVisible', {
+                    detail: {
+                      title: topLevelTitle || mobileAnchor.textContent?.trim(),
+                      id: mobileAnchor.id,
+                    },
+                  })
+                );
+                sessionStorage.removeItem('globalLayoutScrolling');
+              }, 100);
+            }
+          }
+        } else {
+          // Desktop: scroll in desktop content container
+          const mainContent = document.getElementById('main-content');
+          if (mainContent) {
+            const desktopAnchor = mainContent.querySelector(`[id="${anchor}"]`);
+            if (desktopAnchor) {
+              console.log(
+                '[GlobalAppLayout] Immediate desktop scroll for:',
+                anchor
+              );
+
+              try {
+                // Add temporary scroll margin to account for header
+                const originalScrollMargin =
+                  desktopAnchor.style.scrollMarginTop;
+                desktopAnchor.style.scrollMarginTop = '56px';
+
+                desktopAnchor.scrollIntoView({
+                  behavior: 'auto',
+                  block: 'start',
+                  inline: 'nearest',
+                });
+
+                // Restore original scroll margin after a delay
+                setTimeout(() => {
+                  desktopAnchor.style.scrollMarginTop = originalScrollMargin;
+                }, 1000);
+              } catch (e) {
+                // Fallback to manual calculation
+                const headerHeight = 56;
+                const rect = desktopAnchor.getBoundingClientRect();
+                const scrollTop = window.scrollY + rect.top - headerHeight;
+                const finalScrollTop = Math.max(0, scrollTop);
+                window.scrollTo({ top: finalScrollTop, behavior: 'auto' });
+              }
+
+              setTimeout(() => {
+                let topLevelTitle = null;
+                if (typeof window !== 'undefined') {
+                  topLevelTitle = sessionStorage.getItem(
+                    'subNav-topLevelTitle'
+                  );
+                  if (topLevelTitle) {
+                    try {
+                      topLevelTitle = JSON.parse(topLevelTitle);
+                    } catch {}
+                  }
+                }
+                window.dispatchEvent(
+                  new CustomEvent('sectionVisible', {
+                    detail: {
+                      title: topLevelTitle || desktopAnchor.textContent?.trim(),
+                      id: desktopAnchor.id,
+                    },
+                  })
+                );
+                sessionStorage.removeItem('globalLayoutScrolling');
+              }, 100);
+            }
+          }
+        }
+      });
+    }
+
+    window.addEventListener('DOMContentLoaded', () => {
+      // Check navigation flag first, before any components mount
+      const isMainNavNavigation =
+        sessionStorage.getItem('navigatingToMainNav') === 'true';
+      console.log(
+        '[GlobalAppLayout] DOMContentLoaded - navigation flag:',
+        isMainNavNavigation
+      );
+
+      if (isMainNavNavigation) {
+        // Clear the flag immediately
+        sessionStorage.removeItem('navigatingToMainNav');
+        console.log(
+          '[GlobalAppLayout] Cleared navigation flag for main nav navigation'
+        );
+        // Don't clear header state here - let navigation components handle it
+      }
+
+      // Handle URL hash scrolling (fallback for cases where immediate scroll didn't work)
+      if (window.location.hash) {
+        const anchor = window.location.hash.substring(1);
+        console.log(
+          '[GlobalAppLayout] DOMContentLoaded fallback hash scroll for:',
+          anchor
+        );
+
+        // Only proceed if we haven't already scrolled
+        if (sessionStorage.getItem('globalLayoutScrolling') !== 'true') {
+          sessionStorage.setItem('globalLayoutScrolling', 'true');
+
+          if (window.innerWidth <= 640) {
+            // Mobile: scroll in mobile content container
+            const mobileContent = document.getElementById(
+              'main-content-mobile'
+            );
+            if (mobileContent) {
+              const mobileAnchor = mobileContent.querySelector(
+                `[id="${anchor}"]`
+              );
+              if (mobileAnchor) {
+                setTimeout(() => {
+                  const rect = mobileAnchor.getBoundingClientRect();
+                  const mobileRect = mobileContent.getBoundingClientRect();
+                  const scrollTop =
+                    mobileContent.scrollTop + rect.top - mobileRect.top;
+                  console.log(
+                    '[GlobalAppLayout] Fallback mobile scroll to:',
+                    scrollTop
+                  );
+                  mobileContent.scrollTo({ top: scrollTop, behavior: 'auto' });
+
+                  setTimeout(() => {
+                    let topLevelTitle = null;
+                    if (typeof window !== 'undefined') {
+                      topLevelTitle = sessionStorage.getItem(
+                        'subNav-topLevelTitle'
+                      );
+                      if (topLevelTitle) {
+                        try {
+                          topLevelTitle = JSON.parse(topLevelTitle);
+                        } catch {}
+                      }
+                    }
+                    window.dispatchEvent(
+                      new CustomEvent('sectionVisible', {
+                        detail: {
+                          title:
+                            topLevelTitle || mobileAnchor.textContent?.trim(),
+                          id: mobileAnchor.id,
+                        },
+                      })
+                    );
+                    // Clear the flag after scrolling
+                    if (typeof window !== 'undefined') {
+                      sessionStorage.removeItem('globalLayoutScrolling');
+                    }
+                  }, 100);
+                }, 100);
+              }
+            }
+          } else {
+            // Desktop: scroll in desktop content container
+            const mainContent = document.getElementById('main-content');
+            if (mainContent) {
+              const desktopAnchor = mainContent.querySelector(
+                `[id="${anchor}"]`
+              );
+              if (desktopAnchor) {
+                setTimeout(() => {
+                  console.log(
+                    '[GlobalAppLayout] Fallback desktop scroll for:',
+                    anchor
+                  );
+
+                  // Try scrollIntoView first with a temporary offset
+                  try {
+                    // Add temporary scroll margin to account for header
+                    const originalScrollMargin =
+                      desktopAnchor.style.scrollMarginTop;
+                    desktopAnchor.style.scrollMarginTop = '56px';
+
+                    desktopAnchor.scrollIntoView({
+                      behavior: 'auto',
+                      block: 'start',
+                      inline: 'nearest',
+                    });
+
+                    console.log(
+                      '[GlobalAppLayout] Used fallback scrollIntoView for desktop'
+                    );
+
+                    // Restore original scroll margin after a delay
+                    setTimeout(() => {
+                      desktopAnchor.style.scrollMarginTop =
+                        originalScrollMargin;
+                    }, 1000);
+                  } catch (e) {
+                    console.log(
+                      '[GlobalAppLayout] Fallback scrollIntoView failed, using manual calculation:',
+                      e
+                    );
+
+                    // Fallback to manual calculation
+                    const headerHeight = 56;
+                    const rect = desktopAnchor.getBoundingClientRect();
+                    const scrollTop = window.scrollY + rect.top - headerHeight;
+                    console.log(
+                      '[GlobalAppLayout] Fallback desktop scroll calculation:',
+                      {
+                        anchor,
+                        rectTop: rect.top,
+                        windowScrollY: window.scrollY,
+                        headerHeight,
+                        scrollTop,
+                        elementText: desktopAnchor.textContent?.trim(),
+                      }
+                    );
+
+                    // Ensure scrollTop is not negative
+                    const finalScrollTop = Math.max(0, scrollTop);
+                    console.log(
+                      '[GlobalAppLayout] Fallback final scroll position:',
+                      finalScrollTop
+                    );
+
+                    window.scrollTo({ top: finalScrollTop, behavior: 'auto' });
+                  }
+
+                  setTimeout(() => {
+                    let topLevelTitle = null;
+                    if (typeof window !== 'undefined') {
+                      topLevelTitle = sessionStorage.getItem(
+                        'subNav-topLevelTitle'
+                      );
+                      if (topLevelTitle) {
+                        try {
+                          topLevelTitle = JSON.parse(topLevelTitle);
+                        } catch {}
+                      }
+                    }
+                    window.dispatchEvent(
+                      new CustomEvent('sectionVisible', {
+                        detail: {
+                          title:
+                            topLevelTitle || desktopAnchor.textContent?.trim(),
+                          id: desktopAnchor.id,
+                        },
+                      })
+                    );
+                    // Clear the flag after scrolling
+                    if (typeof window !== 'undefined') {
+                      sessionStorage.removeItem('globalLayoutScrolling');
+                    }
+                  }, 100);
+                }, 100);
+              } else {
+                console.log(
+                  '[GlobalAppLayout] Fallback desktop anchor not found in main-content container:',
+                  anchor
+                );
+                // Log all available anchors for debugging
+                const allAnchors = mainContent.querySelectorAll('[id]');
+                console.log(
+                  '[GlobalAppLayout] Available anchors in main-content:',
+                  Array.from(allAnchors).map(el => el.id)
+                );
+                // Clear the flag if anchor not found
+                if (typeof window !== 'undefined') {
+                  sessionStorage.removeItem('globalLayoutScrolling');
+                }
+              }
+            } else {
+              console.log(
+                '[GlobalAppLayout] Fallback desktop main-content container not found'
+              );
+              // Clear the flag if container not found
+              if (typeof window !== 'undefined') {
+                sessionStorage.removeItem('globalLayoutScrolling');
+              }
+            }
+          }
+        }
+      }
+    });
+  }
+
+  // Handle layout changes (mobile ↔ desktop)
+  if (typeof window !== 'undefined') {
+    let lastWidth = window.innerWidth;
+    let resizeTimeout = null;
+
+    window.addEventListener('resize', () => {
+      // Debounce resize events
+      if (resizeTimeout) {
+        clearTimeout(resizeTimeout);
+      }
+
+      resizeTimeout = setTimeout(() => {
+        const currentWidth = window.innerWidth;
+        const wasMobile = lastWidth <= 640;
+        const isMobile = currentWidth <= 640;
+
+        console.log('[GlobalAppLayout] Resize detected:', {
+          lastWidth,
+          currentWidth,
+          wasMobile,
+          isMobile,
+          changed: wasMobile !== isMobile,
+        });
+
+        if (wasMobile !== isMobile) {
+          console.log(
+            '[GlobalAppLayout] Layout changed from',
+            wasMobile ? 'mobile' : 'desktop',
+            'to',
+            isMobile ? 'mobile' : 'desktop'
+          );
+
+          // Handle anchor scrolling for layout changes
+          if (window.location.hash) {
+            const anchor = window.location.hash.substring(1);
+            console.log(
+              '[GlobalAppLayout] Layout change with URL hash:',
+              anchor
+            );
+
+            // Wait for navigation state to update, then scroll
+            setTimeout(() => {
+              if (isMobile) {
+                // Mobile: scroll in mobile content container
+                const mobileContent = document.getElementById(
+                  'main-content-mobile'
+                );
+                if (mobileContent) {
+                  const mobileAnchor = mobileContent.querySelector(
+                    `[id="${anchor}"]`
+                  );
+                  if (mobileAnchor) {
+                    const rect = mobileAnchor.getBoundingClientRect();
+                    const mobileRect = mobileContent.getBoundingClientRect();
+                    const scrollTop =
+                      mobileContent.scrollTop + rect.top - mobileRect.top;
+                    console.log(
+                      '[GlobalAppLayout] Scrolling mobile to anchor:',
+                      scrollTop
+                    );
+                    mobileContent.scrollTo({
+                      top: scrollTop,
+                      behavior: 'auto',
+                    });
+
+                    setTimeout(() => {
+                      let topLevelTitle = null;
+                      if (typeof window !== 'undefined') {
+                        topLevelTitle = sessionStorage.getItem(
+                          'subNav-topLevelTitle'
+                        );
+                        if (topLevelTitle) {
+                          try {
+                            topLevelTitle = JSON.parse(topLevelTitle);
+                          } catch {}
+                        }
+                      }
+                      window.dispatchEvent(
+                        new CustomEvent('sectionVisible', {
+                          detail: {
+                            title:
+                              topLevelTitle || mobileAnchor.textContent?.trim(),
+                            id: mobileAnchor.id,
+                          },
+                        })
+                      );
+                    }, 500);
+                  }
+                }
+              } else {
+                // Desktop: scroll in desktop content container
+                const mainContent = document.getElementById('main-content');
+                if (mainContent) {
+                  const desktopAnchor = mainContent.querySelector(
+                    `[id="${anchor}"]`
+                  );
+                  if (desktopAnchor) {
+                    console.log(
+                      '[GlobalAppLayout] Desktop anchor found for layout change:',
+                      {
+                        anchor,
+                        elementText: desktopAnchor.textContent?.trim(),
+                        elementId: desktopAnchor.id,
+                      }
+                    );
+
+                    // Try scrollIntoView first with a temporary offset
+                    try {
+                      // Add temporary scroll margin to account for header
+                      const originalScrollMargin =
+                        desktopAnchor.style.scrollMarginTop;
+                      desktopAnchor.style.scrollMarginTop = '56px';
+
+                      desktopAnchor.scrollIntoView({
+                        behavior: 'auto',
+                        block: 'start',
+                        inline: 'nearest',
+                      });
+
+                      console.log(
+                        '[GlobalAppLayout] Used scrollIntoView for desktop layout change with scroll margin'
+                      );
+
+                      // Restore original scroll margin after a delay
+                      setTimeout(() => {
+                        desktopAnchor.style.scrollMarginTop =
+                          originalScrollMargin;
+                      }, 1000);
+                    } catch (e) {
+                      console.log(
+                        '[GlobalAppLayout] scrollIntoView failed for layout change, using manual calculation:',
+                        e
+                      );
+
+                      // Fallback to manual calculation
+                      const headerHeight = 56;
+                      const rect = desktopAnchor.getBoundingClientRect();
+                      const scrollTop =
+                        window.scrollY + rect.top - headerHeight;
+                      console.log(
+                        '[GlobalAppLayout] Desktop scroll calculation for layout change:',
+                        {
+                          anchor,
+                          rectTop: rect.top,
+                          windowScrollY: window.scrollY,
+                          headerHeight,
+                          scrollTop,
+                          elementText: desktopAnchor.textContent?.trim(),
+                        }
+                      );
+
+                      // Ensure scrollTop is not negative
+                      const finalScrollTop = Math.max(0, scrollTop);
+                      console.log(
+                        '[GlobalAppLayout] Final scroll position for layout change:',
+                        finalScrollTop
+                      );
+
+                      window.scrollTo({
+                        top: finalScrollTop,
+                        behavior: 'auto',
+                      });
+                    }
+
+                    setTimeout(() => {
+                      let topLevelTitle = null;
+                      if (typeof window !== 'undefined') {
+                        topLevelTitle = sessionStorage.getItem(
+                          'subNav-topLevelTitle'
+                        );
+                        if (topLevelTitle) {
+                          try {
+                            topLevelTitle = JSON.parse(topLevelTitle);
+                          } catch {}
+                        }
+                      }
+                      window.dispatchEvent(
+                        new CustomEvent('sectionVisible', {
+                          detail: {
+                            title:
+                              topLevelTitle ||
+                              desktopAnchor.textContent?.trim(),
+                            id: desktopAnchor.id,
+                          },
+                        })
+                      );
+                    }, 500);
+                  }
+                }
+              }
+            }, 350); // Wait for navigation state to settle
+          }
+
+          // Dispatch custom event for layout transition
+          window.dispatchEvent(
+            new CustomEvent('layoutTransition', {
+              detail: { isMobile },
+            })
+          );
+          console.log(
+            '[GlobalAppLayout] Dispatched layoutTransition event for',
+            isMobile ? 'mobile' : 'desktop',
+            'layout'
+          );
+        }
+
+        lastWidth = currentWidth;
+      }, 250); // Debounce delay
+    });
+  }
+</script>