rizzo-css 0.0.17 → 0.0.18

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

@@ -1,623 +0,0 @@
----
-import Gear from './icons/Gear.astro';
-import Search from './Search.astro';
-import { getFrameworkFromPath } from '../config/frameworks.js';
-import { DOCS_NAV } from '../config/docsNav';
-
-// 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 }>;
-  /** Docs dropdown: grouped sections (Introduction, Foundations) */
-  docsMenu?: {
-    groups: Array<{ label: string; links: 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 }>;
-  };
-}
-
-// Build docs menu from DOCS_NAV (Introduction + Foundations only; Components has its own nav menu)
-const docsMenuGroups = DOCS_NAV.filter((group) => group.label !== 'Components').map((group) => ({
-  label: group.label,
-  links: group.links.map((link) => ({
-    href: link.frameworkOnly ? `${docsPrefix}/${link.href}` : `/docs/${link.href}`,
-    label: link.label,
-  })),
-}));
-
-const navLinks: NavLink[] = [
-  { href: '/', label: 'Home' },
-  {
-    href: '/docs/getting-started',
-    label: 'Docs',
-    docsMenu: { groups: docsMenuGroups },
-  },
-  {
-    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' },
-      ],
-    },
-  },
-];
----
-
-<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.docsMenu || !!link.componentsMenu;
-        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.docsMenu ? (
-              <ul class="navbar__submenu navbar__submenu--docs" id={subLinkId} role="menu" aria-label={`${link.label} submenu`}>
-                {link.docsMenu.groups.map((group) => (
-                  <li class="navbar__submenu-group" role="none">
-                    <span class="navbar__submenu-group-label" aria-hidden="true">{group.label}</span>
-                    <ul class="navbar__submenu-list" role="group" aria-label={group.label}>
-                      {group.links.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>
-                  </li>
-                ))}
-              </ul>
-            ) : 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>
-            ) : 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: when opening, focus first sublink (desktop and mobile)
-        if (!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>