rizzo-css 0.0.11 → 0.0.13

package/scaffold/astro-app/src/components/Navbar.astro

@@ -0,0 +1,701 @@
+---
+import Gear from './icons/Gear.astro';
+import Search from './Search.astro';
+import { getFrameworkFromPath } from '../config/frameworks.js';
+import type { ThemeIconKey } from '../config/themes';
+import { THEMES_DARK, THEMES_LIGHT } from '../config/themes';
+import Owl from './icons/Owl.astro';
+import Palette from './icons/Palette.astro';
+import Flame from './icons/Flame.astro';
+import Sunset from './icons/Sunset.astro';
+import Zap from './icons/Zap.astro';
+import Shield from './icons/Shield.astro';
+import Heart from './icons/Heart.astro';
+import Sun from './icons/Sun.astro';
+import Cake from './icons/Cake.astro';
+import Lemon from './icons/Lemon.astro';
+import Rainbow from './icons/Rainbow.astro';
+import Leaf from './icons/Leaf.astro';
+import Cherry from './icons/Cherry.astro';
+import Brush from './icons/Brush.astro';
+
+// Extend Window interface for openSettings
+declare global {
+  interface Window {
+    openSettings?: () => void;
+  }
+}
+
+interface Props {
+  siteName?: string;
+  logo?: string;
+}
+
+const { siteName = 'Rizzo CSS', logo } = Astro.props;
+
+// Get current URL pathname and framework for component links only
+const currentPath = Astro.url.pathname;
+const { framework } = getFrameworkFromPath(currentPath);
+const docsPrefix = framework.pathPrefix;
+
+/** Use only for component routes; docs and themes are general (no framework prefix). */
+function componentHref(path: string): string {
+  if (!path.startsWith('/docs')) return path;
+  return docsPrefix + path.slice('/docs'.length) || docsPrefix || '/';
+}
+
+// Navigation links with optional sub-links (doc paths are rewritten by docHref)
+interface NavLink {
+  href: string;
+  label: string;
+  subLinks?: Array<{ href: string; label: string }>;
+  /** Components dropdown: overview full width, then two columns of links */
+  componentsMenu?: {
+    overview: { href: string; label: string };
+    links: Array<{ href: string; label: string }>;
+  };
+  /** Themes dropdown: overview full width, then Dark | Light columns with icons */
+  themesMenu?: {
+    overview: { href: string; label: string };
+    dark: Array<{ href: string; label: string; icon: typeof Owl }>;
+    light: Array<{ href: string; label: string; icon: typeof Owl }>;
+  };
+}
+
+const themeIconMap: Record<ThemeIconKey, typeof Owl> = {
+  gear: Gear,
+  owl: Owl,
+  palette: Palette,
+  flame: Flame,
+  sunset: Sunset,
+  zap: Zap,
+  shield: Shield,
+  heart: Heart,
+  sun: Sun,
+  cake: Cake,
+  lemon: Lemon,
+  rainbow: Rainbow,
+  leaf: Leaf,
+  cherry: Cherry,
+  brush: Brush,
+};
+
+const navLinks: NavLink[] = [
+  { href: '/', label: 'Home' },
+  {
+    href: '/docs/getting-started',
+    label: 'Docs',
+    subLinks: [
+      { href: '/docs/getting-started', label: 'Getting Started' },
+      { href: '/docs/design-system', label: 'Design System' },
+      { href: '/docs/accessibility', label: 'Accessibility' },
+      { href: '/docs/colors', label: 'Colors' },
+    ],
+  },
+  {
+    href: componentHref('/docs/components'),
+    label: 'Components',
+    componentsMenu: {
+      overview: { href: componentHref('/docs/components'), label: 'Overview' },
+      links: [
+        { href: componentHref('/docs/components/accordion'), label: 'Accordion' },
+        { href: componentHref('/docs/components/alert'), label: 'Alert' },
+        { href: componentHref('/docs/components/avatar'), label: 'Avatar' },
+        { href: componentHref('/docs/components/badge'), label: 'Badge' },
+        { href: componentHref('/docs/components/breadcrumb'), label: 'Breadcrumb' },
+        { href: componentHref('/docs/components/button'), label: 'Button' },
+        { href: componentHref('/docs/components/cards'), label: 'Cards' },
+        { href: componentHref('/docs/components/copy-to-clipboard'), label: 'CopyToClipboard' },
+        { href: componentHref('/docs/components/divider'), label: 'Divider' },
+        { href: componentHref('/docs/components/dropdown'), label: 'Dropdown' },
+        { href: componentHref('/docs/components/forms'), label: 'Forms' },
+        { href: componentHref('/docs/components/icons'), label: 'Icons' },
+        { href: componentHref('/docs/components/modal'), label: 'Modal' },
+        { href: componentHref('/docs/components/navbar'), label: 'Navbar' },
+        { href: componentHref('/docs/components/pagination'), label: 'Pagination' },
+        { href: componentHref('/docs/components/progress-bar'), label: 'Progress Bar' },
+        { href: componentHref('/docs/components/search'), label: 'Search' },
+        { href: componentHref('/docs/components/settings'), label: 'Settings' },
+        { href: componentHref('/docs/components/spinner'), label: 'Spinner' },
+        { href: componentHref('/docs/components/table'), label: 'Table' },
+        { href: componentHref('/docs/components/tabs'), label: 'Tabs' },
+        { href: componentHref('/docs/components/theme-switcher'), label: 'Theme Switcher' },
+        { href: componentHref('/docs/components/toast'), label: 'Toast' },
+        { href: componentHref('/docs/components/tooltip'), label: 'Tooltip' },
+      ],
+    },
+  },
+  {
+    href: '/docs/theming',
+    label: 'Themes',
+    themesMenu: {
+      overview: { href: '/docs/theming', label: 'Overview' },
+      dark: THEMES_DARK.map((t) => ({
+        href: `/docs/themes/${t.value}`,
+        label: t.label,
+        icon: themeIconMap[t.iconKey],
+      })),
+      light: THEMES_LIGHT.map((t) => ({
+        href: `/docs/themes/${t.value}`,
+        label: t.label,
+        icon: themeIconMap[t.iconKey],
+      })),
+    },
+  },
+];
+---
+
+<nav class="navbar" role="navigation" aria-label="Main navigation">
+  <div class="navbar__container">
+    <div class="navbar__brand">
+      {logo && (
+        <img src={logo} alt={`${siteName} logo`} class="navbar__logo" />
+      )}
+      <a href="/" class="navbar__brand-link" aria-label={`${siteName} home`}>
+        {siteName}
+      </a>
+    </div>
+    
+    <div class="navbar__actions-desktop">
+      <Search />
+      <div class="tooltip-wrapper" aria-describedby="navbar-settings-tooltip">
+        <button
+          class="navbar__settings-btn"
+          type="button"
+          aria-label="Open settings"
+          onclick="window.openSettings && window.openSettings()"
+        >
+          <Gear class="navbar__settings-icon" width={20} height={20} />
+          <span class="navbar__settings-label">Settings</span>
+        </button>
+        <span class="tooltip tooltip--bottom" id="navbar-settings-tooltip" role="tooltip" aria-hidden="true">Settings</span>
+      </div>
+    </div>
+    
+    <button
+      class="navbar__toggle"
+      type="button"
+      aria-expanded="false"
+      aria-controls="navbar-menu"
+      aria-label="Toggle navigation menu"
+      id="navbar-toggle"
+    >
+      <span class="sr-only">Menu</span>
+      <span class="navbar__toggle-icon" aria-hidden="true">
+        <span></span>
+        <span></span>
+        <span></span>
+      </span>
+    </button>
+    
+    <div class="navbar__menu" id="navbar-menu" role="menu">
+      {navLinks.map((link) => {
+        const isActive = currentPath === link.href || (link.href !== '/' && currentPath.startsWith(link.href));
+        const hasSubLinks = (link.subLinks && link.subLinks.length > 0) || !!link.componentsMenu || !!link.themesMenu;
+        const subLinkId = hasSubLinks ? `navbar-submenu-${link.label.toLowerCase().replace(/\s+/g, '-')}` : undefined;
+        
+        return (
+          <div class={`navbar__item ${hasSubLinks ? 'navbar__item--has-dropdown' : ''}`}>
+            {hasSubLinks ? (
+              <div
+                class="navbar__link"
+                role="menuitem"
+                tabindex={0}
+                aria-label={link.label}
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-controls={subLinkId}
+                data-dropdown-toggle={subLinkId}
+                data-dropdown-href={link.href}
+              >
+                {link.label}
+                <svg class="navbar__dropdown-icon" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
+                  <path d="M2 4l4 4 4-4"/>
+                </svg>
+              </div>
+            ) : (
+              <div
+                class="navbar__link"
+                role="menuitem"
+                tabindex={0}
+                aria-label={link.label}
+                aria-current={isActive ? 'page' : undefined}
+                data-nav-href={link.href}
+              >
+                {link.label}
+              </div>
+            )}
+            {link.componentsMenu ? (
+              <ul class="navbar__submenu navbar__submenu--components" id={subLinkId} role="menu" aria-label={`${link.label} submenu`}>
+                <li class="navbar__submenu-overview" role="none">
+                  <div
+                    class="navbar__sublink navbar__sublink--overview"
+                    role="menuitem"
+                    tabindex={-1}
+                    aria-label={link.componentsMenu.overview.label}
+                    aria-current={currentPath === link.componentsMenu.overview.href ? 'page' : undefined}
+                    data-nav-href={link.componentsMenu.overview.href}
+                  >
+                    {link.componentsMenu.overview.label}
+                  </div>
+                </li>
+                <li class="navbar__submenu-components-grid" role="none">
+                  <div class="navbar__submenu-column">
+                    {link.componentsMenu.links.slice(0, Math.ceil(link.componentsMenu.links.length / 2)).map((subLink) => {
+                      const isSubActive = currentPath === subLink.href;
+                      return (
+                        <div
+                          class="navbar__sublink"
+                          role="menuitem"
+                          tabindex={-1}
+                          aria-label={subLink.label}
+                          aria-current={isSubActive ? 'page' : undefined}
+                          data-nav-href={subLink.href}
+                        >
+                          {subLink.label}
+                        </div>
+                      );
+                    })}
+                  </div>
+                  <div class="navbar__submenu-column">
+                    {link.componentsMenu.links.slice(Math.ceil(link.componentsMenu.links.length / 2)).map((subLink) => {
+                      const isSubActive = currentPath === subLink.href;
+                      return (
+                        <div
+                          class="navbar__sublink"
+                          role="menuitem"
+                          tabindex={-1}
+                          aria-label={subLink.label}
+                          aria-current={isSubActive ? 'page' : undefined}
+                          data-nav-href={subLink.href}
+                        >
+                          {subLink.label}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </li>
+              </ul>
+            ) : link.themesMenu ? (
+              <ul class="navbar__submenu navbar__submenu--themes" id={subLinkId} role="menu" aria-label={`${link.label} submenu`}>
+                <li class="navbar__submenu-overview" role="none">
+                  <div
+                    class="navbar__sublink navbar__sublink--overview"
+                    role="menuitem"
+                    tabindex={-1}
+                    aria-label={link.themesMenu.overview.label}
+                    aria-current={currentPath === link.themesMenu.overview.href ? 'page' : undefined}
+                    data-nav-href={link.themesMenu.overview.href}
+                  >
+                    {link.themesMenu.overview.label}
+                  </div>
+                </li>
+                <li class="navbar__submenu-themes-grid" role="none">
+                  <div class="navbar__submenu-column">
+                    <span class="navbar__submenu-column-label" aria-hidden="true">Dark themes</span>
+                    {link.themesMenu.dark.map((theme) => {
+                      const isSubActive = currentPath === theme.href;
+                      const ThemeIcon = theme.icon;
+                      return (
+                        <div
+                          class="navbar__sublink navbar__sublink--with-icon"
+                          role="menuitem"
+                          tabindex={-1}
+                          aria-label={theme.label}
+                          aria-current={isSubActive ? 'page' : undefined}
+                          data-nav-href={theme.href}
+                        >
+                          <ThemeIcon width={16} height={16} class="navbar__sublink-icon" />
+                          <span class="navbar__sublink-text">{theme.label}</span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                  <div class="navbar__submenu-column">
+                    <span class="navbar__submenu-column-label" aria-hidden="true">Light themes</span>
+                    {link.themesMenu.light.map((theme) => {
+                      const isSubActive = currentPath === theme.href;
+                      const ThemeIcon = theme.icon;
+                      return (
+                        <div
+                          class="navbar__sublink navbar__sublink--with-icon"
+                          role="menuitem"
+                          tabindex={-1}
+                          aria-label={theme.label}
+                          aria-current={isSubActive ? 'page' : undefined}
+                          data-nav-href={theme.href}
+                        >
+                          <ThemeIcon width={16} height={16} class="navbar__sublink-icon" />
+                          <span class="navbar__sublink-text">{theme.label}</span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </li>
+              </ul>
+            ) : hasSubLinks && link.subLinks ? (
+              <ul class="navbar__submenu" id={subLinkId} role="menu" aria-label={`${link.label} submenu`}>
+                {link.subLinks.map((subLink) => {
+                  const isSubActive = currentPath === subLink.href;
+                  return (
+                    <li role="none">
+                      <div
+                        class="navbar__sublink"
+                        role="menuitem"
+                        tabindex={-1}
+                        aria-label={subLink.label}
+                        aria-current={isSubActive ? 'page' : undefined}
+                        data-nav-href={subLink.href}
+                      >
+                        {subLink.label}
+                      </div>
+                    </li>
+                  );
+                })}
+              </ul>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  </div>
+</nav>
+
+<script>
+  (function initNavbar() {
+    const navbar = document.querySelector('.navbar');
+    if (!navbar) return;
+
+    const menuToggleBtn = document.getElementById('navbar-toggle');
+    const menu = navbar.querySelector('.navbar__menu');
+    
+    if (!menuToggleBtn || !menu) return;
+
+    const toggleMenu = (open?: boolean) => {
+      const isOpen = open !== undefined ? open : menu.classList.contains('navbar__menu--open');
+      const willBeOpen = !isOpen;
+      
+      // On mobile, close search if it's open when opening menu
+      const isMobile = window.innerWidth <= 1023;
+      if (isMobile && !isOpen) {
+        // Menu is about to open, close any open search instance
+        document.querySelectorAll('[data-search]').forEach((search) => {
+          const panel = search.querySelector('.search__panel');
+          if (panel?.getAttribute('aria-hidden') === 'false') {
+            const el = search as Element & { __searchInstance?: { closeSearch?: () => void } };
+            if (el?.__searchInstance?.closeSearch) {
+              el.__searchInstance.closeSearch();
+            } else {
+              const overlay = search.querySelector('[data-search-overlay]');
+              if (overlay instanceof HTMLElement) overlay.click();
+            }
+          }
+        });
+      }
+      
+      // Toggle class on navbar to hide/show bottom border
+      if (willBeOpen) {
+        navbar.classList.add('navbar--menu-open');
+      } else {
+        navbar.classList.remove('navbar--menu-open');
+      }
+      
+      menu.classList.toggle('navbar__menu--open', !isOpen);
+      menuToggleBtn.setAttribute('aria-expanded', (!isOpen).toString());
+    };
+
+    menuToggleBtn.addEventListener('click', (e) => {
+      const target = e.target as Element;
+      // Only skip if click was inside the menu (e.g. dropdown toggle) - not when clicking the hamburger
+      if (target.closest('#navbar-menu') && target.closest('[data-dropdown-toggle]')) {
+        return;
+      }
+      toggleMenu();
+    });
+
+    // Navigate when activating menu items that use data-nav-href (non-interactive element with role=menuitem)
+    const navHrefHandler = (e: Event) => {
+      const target = (e.target as Element).closest('[data-nav-href]');
+      if (target && target instanceof HTMLElement) {
+        const href = target.getAttribute('data-nav-href');
+        if (href) {
+          e.preventDefault();
+          window.location.href = href;
+        }
+      }
+    };
+    navbar.addEventListener('click', navHrefHandler);
+    navbar.addEventListener('keydown', (e: Event) => {
+      const keyEvent = e as KeyboardEvent;
+      if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
+        const target = (keyEvent.target as Element).closest('[data-nav-href]');
+        if (target && target instanceof HTMLElement) {
+          const href = target.getAttribute('data-nav-href');
+          if (href) {
+            keyEvent.preventDefault();
+            window.location.href = href;
+          }
+        }
+      }
+    });
+
+    // Dropdown menu handling
+    const dropdownToggles = navbar.querySelectorAll('[data-dropdown-toggle]');
+    dropdownToggles.forEach((dropdownToggleBtn) => {
+      const item = dropdownToggleBtn.closest('.navbar__item--has-dropdown');
+      if (!item) return;
+
+      const submenu = item.querySelector('.navbar__submenu');
+      const sublinks = submenu ? Array.from(submenu.querySelectorAll('.navbar__sublink')) : [];
+
+      // Adjust dropdown alignment to prevent overflow
+      const adjustDropdownPosition = () => {
+        if (!submenu || window.innerWidth <= 1023) return; // Skip on mobile
+        
+        const submenuEl = submenu as HTMLElement;
+        
+        // Temporarily make visible to measure
+        const wasVisible = submenuEl.style.visibility !== 'hidden';
+        if (!wasVisible) {
+          submenuEl.style.visibility = 'hidden';
+          submenuEl.style.opacity = '1';
+          submenuEl.style.display = 'block';
+        }
+        
+        const itemRect = item.getBoundingClientRect();
+        const submenuWidth = submenuEl.offsetWidth || submenuEl.scrollWidth;
+        const viewportWidth = window.innerWidth;
+        const padding = 16; // Viewport padding
+        
+        // Check if dropdown would overflow on the right
+        if (itemRect.left + submenuWidth > viewportWidth - padding) {
+          // Align to right edge of parent item
+          submenuEl.style.left = 'auto';
+          submenuEl.style.right = '0';
+        } else {
+          // Default: align to left edge
+          submenuEl.style.left = '0';
+          submenuEl.style.right = 'auto';
+        }
+        
+        // Restore visibility state
+        if (!wasVisible) {
+          submenuEl.style.visibility = '';
+          submenuEl.style.opacity = '';
+          submenuEl.style.display = '';
+        }
+      };
+
+      const handleToggle = (e: Event) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+        
+        const isMobile = window.innerWidth <= 1023;
+        const isExpanded = item.getAttribute('aria-expanded') === 'true';
+        
+        // On mobile, preserve scroll position to prevent jarring
+        let scrollTop = 0;
+        if (isMobile && menu) {
+          scrollTop = (menu as HTMLElement).scrollTop;
+        }
+        
+        item.setAttribute('aria-expanded', (!isExpanded).toString());
+        
+        // Adjust position when opening
+        if (!isExpanded) {
+          setTimeout(() => {
+            adjustDropdownPosition();
+            
+            // Restore scroll position on mobile to prevent jarring
+            if (isMobile && menu) {
+              (menu as HTMLElement).scrollTop = scrollTop;
+            }
+          }, 0);
+        }
+        
+        // Focus management - only on desktop
+        if (!isMobile && !isExpanded && sublinks.length > 0) {
+          setTimeout(() => (sublinks[0] as HTMLElement).focus(), 0);
+        }
+      };
+
+      // Always use capture phase to ensure we handle it before any other listeners
+      dropdownToggleBtn.addEventListener('click', handleToggle, true);
+
+      // Keyboard navigation on dropdown toggle
+      dropdownToggleBtn.addEventListener('keydown', (e: Event) => {
+        const keyEvent = e as KeyboardEvent;
+        if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
+          keyEvent.preventDefault();
+          handleToggle(e);
+        } else if (keyEvent.key === 'ArrowDown' && sublinks.length > 0) {
+          keyEvent.preventDefault();
+          const isExpanded = item.getAttribute('aria-expanded') === 'true';
+          if (!isExpanded) {
+            item.setAttribute('aria-expanded', 'true');
+            adjustDropdownPosition();
+          }
+          setTimeout(() => (sublinks[0] as HTMLElement).focus(), 0);
+        } else if (keyEvent.key === 'ArrowUp' && sublinks.length > 0) {
+          keyEvent.preventDefault();
+          const isExpanded = item.getAttribute('aria-expanded') === 'true';
+          if (!isExpanded) {
+            item.setAttribute('aria-expanded', 'true');
+            adjustDropdownPosition();
+          }
+          // Focus last item when ArrowUp from toggle
+          setTimeout(() => (sublinks[sublinks.length - 1] as HTMLElement).focus(), 0);
+        } else if (keyEvent.key === 'Escape') {
+          keyEvent.preventDefault();
+          item.setAttribute('aria-expanded', 'false');
+        }
+      });
+
+      // Keyboard navigation within submenu
+      if (submenu) {
+        submenu.addEventListener('keydown', (e: Event) => {
+          const keyEvent = e as KeyboardEvent;
+          const currentIndex = sublinks.findIndex(link => link === document.activeElement);
+          
+          if (keyEvent.key === 'Escape') {
+            keyEvent.preventDefault();
+            item.setAttribute('aria-expanded', 'false');
+            (dropdownToggleBtn as HTMLElement).focus();
+          } else if (keyEvent.key === 'ArrowDown') {
+            keyEvent.preventDefault();
+            const nextIndex = (currentIndex + 1) % sublinks.length;
+            (sublinks[nextIndex] as HTMLElement).focus();
+          } else if (keyEvent.key === 'ArrowUp') {
+            keyEvent.preventDefault();
+            const prevIndex = currentIndex <= 0 ? sublinks.length - 1 : currentIndex - 1;
+            (sublinks[prevIndex] as HTMLElement).focus();
+          } else if (keyEvent.key === 'Home') {
+            keyEvent.preventDefault();
+            (sublinks[0] as HTMLElement).focus();
+          } else if (keyEvent.key === 'End') {
+            keyEvent.preventDefault();
+            (sublinks[sublinks.length - 1] as HTMLElement).focus();
+          } else if (keyEvent.key === 'Tab') {
+            // Close dropdown when Tab is pressed (allows natural tab flow)
+            item.setAttribute('aria-expanded', 'false');
+          } else if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
+            // Allow Enter/Space to activate links naturally
+            // The click handler will handle navigation
+          }
+        });
+      }
+
+      // Adjust on hover (for desktop)
+      if (window.innerWidth > 1023) {
+        item.addEventListener('mouseenter', () => {
+          // Small delay to ensure submenu is rendered
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              adjustDropdownPosition();
+            });
+          });
+        });
+      }
+
+      // Adjust on window resize
+      window.addEventListener('resize', adjustDropdownPosition);
+
+      // Close on outside click
+      document.addEventListener('click', (e) => {
+        const target = e.target;
+        // Don't close if clicking on the dropdown toggle or its children
+        const clickedToggle = target && target instanceof Element && (
+          target === dropdownToggleBtn ||
+          target.closest('[data-dropdown-toggle]') === dropdownToggleBtn
+        );
+        if (target && target instanceof Node && !item.contains(target) && !clickedToggle) {
+          item.setAttribute('aria-expanded', 'false');
+        }
+      });
+    });
+
+    // Close menu on outside click
+    document.addEventListener('click', (e) => {
+      const target = e.target as Node | null;
+      // Don't close if clicking inside the navbar (including dropdown toggles and their children)
+      if (target && navbar.contains(target as Node)) {
+        // Also check if it's specifically a dropdown toggle or submenu item
+        const element = target as Element;
+        if (element && (
+          element.closest('[data-dropdown-toggle]') ||
+          element.closest('.navbar__submenu') ||
+          element.closest('.navbar__sublink')
+        )) {
+          return; // Click is on dropdown-related element, don't close menu
+        }
+        return; // Click is inside navbar, don't close menu
+      }
+      // Only close if clicking completely outside the navbar
+      if (target && !navbar.contains(target as Node)) {
+        menu.classList.remove('navbar__menu--open');
+        menuToggleBtn.setAttribute('aria-expanded', 'false');
+        // Close all dropdowns
+        dropdownToggles.forEach((dt) => {
+          const item = dt.closest('.navbar__item--has-dropdown');
+          if (item) item.setAttribute('aria-expanded', 'false');
+        });
+      }
+    });
+
+    // Close menu on Escape key
+    document.addEventListener('keydown', (e: Event) => {
+      const keyEvent = e as KeyboardEvent;
+      if (keyEvent.key === 'Escape') {
+        if (menu.classList.contains('navbar__menu--open')) {
+          toggleMenu(false);
+          menuToggleBtn.focus();
+        }
+        // Close all dropdowns
+        dropdownToggles.forEach((dt) => {
+          const item = dt.closest('.navbar__item--has-dropdown');
+          if (item) {
+            item.setAttribute('aria-expanded', 'false');
+            (dt as HTMLElement).focus();
+          }
+        });
+      }
+    });
+
+    // Settings button keyboard handler
+    const settingsBtn = navbar.querySelector('.navbar__settings-btn');
+    if (settingsBtn) {
+      settingsBtn.addEventListener('click', () => {
+        if (window.openSettings) {
+          window.openSettings();
+        }
+      });
+      settingsBtn.addEventListener('keydown', (e: Event) => {
+        const keyEvent = e as KeyboardEvent;
+        if (keyEvent.key === 'Enter' || keyEvent.key === ' ') {
+          keyEvent.preventDefault();
+          if (window.openSettings) {
+            window.openSettings();
+          }
+        }
+      });
+    }
+
+    // Handle window resize
+    let resizeTimer: ReturnType<typeof setTimeout> | undefined;
+    window.addEventListener('resize', () => {
+      if (resizeTimer) clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        if (window.innerWidth >= 1024) {
+          menu.classList.remove('navbar__menu--open');
+          menuToggleBtn.setAttribute('aria-expanded', 'false');
+          // Close all dropdowns
+          dropdownToggles.forEach((dt) => {
+            const item = dt.closest('.navbar__item--has-dropdown');
+            if (item) item.setAttribute('aria-expanded', 'false');
+          });
+        }
+      }, 250);
+    });
+  })();
+</script>