keystone-design-bootstrap 1.0.3

package/src/design_system/sections/header-navigation.aman.tsx

@@ -0,0 +1,360 @@
+"use client";
+
+import React, { useState, useRef, useCallback } from 'react';
+import Link from 'next/link';
+import { Button } from '../elements';
+import { cx } from '../../utils/cx';
+import { getLogoUrl } from '../../utils/photo-helpers';
+import type { HeaderComponentProps } from './header-navigation';
+
+// Maximum items to show before "View All" link
+const MAX_DROPDOWN_ITEMS = 3;
+
+export function HeaderNavigation({ 
+  variant, 
+  props, 
+  navigation: navigationOverride, 
+  logoImage: logoImageOverride, 
+  logoText: logoTextOverride, 
+  config,
+  companyInformation,
+  websitePhotos,
+}: HeaderComponentProps) {
+  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [dropdownTop, setDropdownTop] = useState(0);
+  const [isScrolled, setIsScrolled] = useState(false);
+  
+  // Timeout ref for delayed dropdown closing
+  const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  
+  // Track scroll position for header animation
+  React.useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 10);
+    };
+    
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+  
+  // Cleanup timeout on unmount
+  React.useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+  
+  const apiCompanyInfo = companyInformation as any;
+  
+  const logoUrl = logoImageOverride || getLogoUrl(websitePhotos) || props?.logo?.image;
+  const companyName = logoTextOverride || apiCompanyInfo?.company_name || props?.logo?.text || '';
+  
+  // Use navigation from config or override
+  const navigation = navigationOverride || config?.navigation?.header || [];
+
+  // Cancel any pending close timeout
+  const cancelCloseTimeout = useCallback(() => {
+    if (closeTimeoutRef.current) {
+      clearTimeout(closeTimeoutRef.current);
+      closeTimeoutRef.current = null;
+    }
+  }, []);
+
+  // Open dropdown immediately
+  const handleMouseEnter = useCallback((item: any, e: React.MouseEvent<HTMLDivElement>) => {
+    cancelCloseTimeout();
+    if (item.children?.length > 0) {
+      const target = e.currentTarget.closest('nav');
+      if (target) {
+        const rect = target.getBoundingClientRect();
+        setDropdownTop(rect.bottom);
+      }
+      setActiveDropdown(item.label);
+    }
+  }, [cancelCloseTimeout]);
+
+  // Close dropdown with delay (allows moving to dropdown)
+  const handleMouseLeave = useCallback(() => {
+    cancelCloseTimeout();
+    closeTimeoutRef.current = setTimeout(() => {
+      setActiveDropdown(null);
+    }, 150); // 150ms delay before closing
+  }, [cancelCloseTimeout]);
+
+  // Keep dropdown open when hovering over it
+  const handleDropdownMouseEnter = useCallback(() => {
+    cancelCloseTimeout();
+  }, [cancelCloseTimeout]);
+
+  // Close dropdown when leaving the dropdown area
+  const handleDropdownMouseLeave = useCallback(() => {
+    handleMouseLeave();
+  }, [handleMouseLeave]);
+
+  // Get display items for dropdown (limit + "View All" if needed)
+  const getDropdownItems = (item: any) => {
+    const children = item.children || [];
+    const isDynamicMenu = item.label === 'Services' || item.label === 'Locations';
+    
+    if (isDynamicMenu && children.length > MAX_DROPDOWN_ITEMS + 1) {
+      // Show first MAX_DROPDOWN_ITEMS items + "View All" link
+      const displayItems = children.slice(0, MAX_DROPDOWN_ITEMS);
+      const viewAllHref = item.label === 'Services' ? '/services' : '/locations';
+      return {
+        items: displayItems,
+        showViewAll: true,
+        viewAllHref,
+        viewAllLabel: `View All ${item.label}`,
+      };
+    }
+    
+    return {
+      items: children,
+      showViewAll: false,
+      viewAllHref: '',
+      viewAllLabel: '',
+    };
+  };
+
+  return (
+    <>
+      {/* Desktop Header */}
+      <header className="hidden md:block sticky top-0 z-50 bg-primary border-b border-secondary transition-all duration-300">
+        <div className="mx-auto max-w-container px-4 md:px-8">
+          {/* Top Row: Logo (left), Company Name (center), Contact Button (right) */}
+          <div className={cx(
+            "relative flex items-center justify-between transition-all duration-300",
+            isScrolled ? "py-2" : "py-8"
+          )}>
+            {/* Left: Logo Image */}
+            <Link href="/" className="flex items-center">
+              {logoUrl && (
+                <img 
+                  src={logoUrl} 
+                  alt={companyName}
+                  className="h-8 md:h-10 w-auto object-contain"
+                />
+              )}
+            </Link>
+
+            {/* Center: Company Name Text */}
+            <Link href="/" className="absolute left-1/2 transform -translate-x-1/2 font-display text-2xl md:text-3xl font-normal uppercase tracking-widest text-fg-primary" suppressHydrationWarning>
+              {companyName}
+            </Link>
+
+            {/* Right: Contact Button */}
+            <div className="flex items-center gap-6">
+              <Button
+                href="/contact"
+                size="sm"
+                className="bg-fg-primary text-white font-body text-sm uppercase tracking-wide px-6 py-2 rounded-sm hover:opacity-90"
+              >
+                Contact
+              </Button>
+            </div>
+          </div>
+
+          {/* Navigation Row with Dropdowns - Centered */}
+          <nav className="border-b border-secondary">
+            <div className="flex items-center justify-center gap-8 py-4">
+              {navigation.map((item: any, i: number) => (
+                <div
+                  key={i}
+                  className="relative"
+                  onMouseEnter={(e) => handleMouseEnter(item, e)}
+                  onMouseLeave={handleMouseLeave}
+                >
+                  <Link
+                    href={item.href}
+                    className={cx(
+                      "font-body text-sm uppercase tracking-wide text-fg-primary pb-4",
+                      activeDropdown === item.label && "border-b-2 border-fg-primary"
+                    )}
+                  >
+                    {item.label}
+                  </Link>
+                  
+                  {/* Dropdown Second Row - Horizontal Layout - Centered */}
+                  {item.children && item.children.length > 0 && activeDropdown === item.label && (
+                    <div 
+                      className="fixed left-0 right-0 w-full pt-6 pb-6 border-b border-secondary bg-primary z-50"
+                      style={{ top: `${dropdownTop}px` }}
+                      onMouseEnter={handleDropdownMouseEnter}
+                      onMouseLeave={handleDropdownMouseLeave}
+                    >
+                      <div className="mx-auto max-w-container px-4 md:px-8">
+                        <div className="flex items-center justify-center gap-8">
+                          {(() => {
+                            const { items, showViewAll, viewAllHref, viewAllLabel } = getDropdownItems(item);
+                            return (
+                              <>
+                                {items.map((link: any, j: number) => (
+                                  <Link
+                                    key={j}
+                                    href={link.href}
+                                    className="font-body text-sm text-fg-primary hover:underline whitespace-nowrap"
+                                  >
+                                    {link.label}
+                                  </Link>
+                                ))}
+                                {showViewAll && (
+                                  <Link
+                                    href={viewAllHref}
+                                    className="font-body text-sm text-fg-primary hover:underline whitespace-nowrap font-semibold"
+                                  >
+                                    {viewAllLabel} →
+                                  </Link>
+                                )}
+                              </>
+                            );
+                          })()}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </nav>
+        </div>
+      </header>
+
+      {/* Mobile Header */}
+      <header className="md:hidden sticky top-0 z-50 bg-primary border-b border-secondary">
+        <div className="flex items-center justify-between px-4 py-4">
+          <button
+            onClick={() => setIsMobileMenuOpen(true)}
+            className="text-fg-primary"
+            aria-label="Open menu"
+          >
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          
+          <Link href="/" className="flex items-center">
+            {logoUrl ? (
+              <img 
+                src={logoUrl} 
+                alt={companyName}
+                className="h-8 w-auto object-contain"
+              />
+            ) : (
+              <span className="font-display text-xl font-normal uppercase tracking-widest text-fg-primary">
+                {companyName}
+              </span>
+            )}
+          </Link>
+          
+          <div className="w-6" />
+        </div>
+      </header>
+
+      {/* Mobile Full-Screen Menu Overlay */}
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 bg-white z-50 md:hidden">
+          <div className="flex flex-col h-full">
+            {/* Mobile Menu Header */}
+            <div className="flex items-center justify-between px-4 py-4 border-b border-secondary">
+              <button
+                onClick={() => setIsMobileMenuOpen(false)}
+                className="text-fg-primary"
+                aria-label="Close menu"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+              
+              <div className="flex items-center">
+                {logoUrl ? (
+                  <img 
+                    src={logoUrl} 
+                    alt={companyName}
+                    className="h-8 w-auto object-contain"
+                  />
+                ) : (
+                  <span className="font-display text-xl font-normal uppercase tracking-widest text-fg-primary">
+                    {companyName}
+                  </span>
+                )}
+              </div>
+              
+              <div className="w-6" />
+            </div>
+
+            {/* Mobile Menu Links */}
+            <nav className="flex-1 overflow-y-auto px-4 py-8">
+              <ul className="space-y-4">
+                {navigation.map((item: any, i: number) => {
+                  const { items, showViewAll, viewAllHref, viewAllLabel } = getDropdownItems(item);
+                  return (
+                    <li key={i}>
+                      <Link
+                        href={item.href}
+                        className="block font-body text-base text-fg-primary py-2"
+                        onClick={() => setIsMobileMenuOpen(false)}
+                      >
+                        {item.label}
+                      </Link>
+                      {items.length > 0 && (
+                        <ul className="ml-4 mt-2 space-y-2">
+                          {items.map((link: any, j: number) => (
+                            <li key={j}>
+                              <Link
+                                href={link.href}
+                                className="block font-body text-sm text-tertiary py-1"
+                                onClick={() => setIsMobileMenuOpen(false)}
+                              >
+                                {link.label}
+                              </Link>
+                            </li>
+                          ))}
+                          {showViewAll && (
+                            <li>
+                              <Link
+                                href={viewAllHref}
+                                className="block font-body text-sm text-tertiary py-1 font-semibold"
+                                onClick={() => setIsMobileMenuOpen(false)}
+                              >
+                                {viewAllLabel} →
+                              </Link>
+                            </li>
+                          )}
+                        </ul>
+                      )}
+                    </li>
+                  );
+                })}
+              </ul>
+            </nav>
+
+            {/* Mobile Menu Footer */}
+            <div className="border-t border-secondary px-4 py-4">
+              <select className="w-full font-body text-sm text-fg-primary bg-transparent border-b border-secondary py-2">
+                <option>English</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Sticky Contact Button (Mobile) */}
+      <div className="fixed bottom-0 left-0 right-0 z-40 md:hidden" style={{ backgroundColor: '#1E1E1E' }}>
+        <Button
+          href="/contact"
+          className="w-full font-body text-sm uppercase tracking-wide py-4 rounded-none"
+          style={{ backgroundColor: '#1E1E1E', color: '#FFFFFF' }}
+        >
+          Contact
+        </Button>
+      </div>
+    </>
+  );
+}
+
+import { registerThemeVariant } from '../../lib/component-registry';
+registerThemeVariant('header-navigation', 'aman', HeaderNavigation);

package/src/design_system/sections/header-navigation.tsx

@@ -0,0 +1,334 @@
+'use client';
+import React, { useRef, useState } from 'react';
+import Link from 'next/link';
+import { ChevronDown } from "@untitledui/icons";
+import { Button as AriaButton, Dialog as AriaDialog, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components";
+import { Button } from '../elements';
+import { GenericHeaderComponent } from './generic-header-component';
+import { cx } from '../../utils/cx';
+import { getLogoUrl } from '../../utils/photo-helpers';
+import type { CompanyInformation } from '../../types/api/company-information';
+import type { WebsitePhotos } from '../../types/api/website-photos';
+import type { NavItem, SiteConfig } from '../../types/config';
+
+export interface HeaderProps {
+  logo: {
+    text: string;
+    href: string;
+    image?: string;
+  };
+  cta_button?: {
+    label: string;
+    href: string;
+    secondary_label?: string;
+    secondary_href?: string;
+  };
+}
+
+export interface HeaderComponentProps {
+  variant?: 'minimal' | 'centered' | 'standard';
+  props?: HeaderProps;
+  navigation?: NavItem[];
+  logoImage?: string;
+  logoText?: string;
+  config?: SiteConfig;
+  companyInformation?: CompanyInformation | null;
+  websitePhotos?: WebsitePhotos | null;
+}
+
+const MobileNavItem = ({ label, href, children, onClose }: { 
+  label: string; 
+  href?: string; 
+  children?: React.ReactNode;
+  onClose?: () => void;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  if (href) {
+    return (
+      <li>
+        <Link 
+          href={href} 
+          className="flex items-center justify-between px-4 py-3 text-sm font-medium text-primary hover:bg-primary_hover"
+          onClick={onClose}
+        >
+          {label}
+        </Link>
+      </li>
+    );
+  }
+
+  return (
+    <li className="flex flex-col gap-0.5">
+      <button
+        aria-expanded={isOpen}
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-primary hover:bg-primary_hover"
+      >
+        {label}
+        <ChevronDown
+          className={cx("size-4 stroke-[2.625px] text-fg-quaternary transition duration-100 ease-linear", isOpen ? "-rotate-180" : "rotate-0")}
+        />
+      </button>
+      {isOpen && <div>{children}</div>}
+    </li>
+  );
+};
+
+export function HeaderNavigation({ 
+  variant = 'standard', 
+  props, 
+  navigation: navigationOverride, 
+  logoImage: logoImageOverride, 
+  logoText: logoTextOverride, 
+  config,
+  companyInformation,
+  websitePhotos,
+}: HeaderComponentProps) {
+  const headerRef = useRef<HTMLElement>(null);
+  
+  const apiCompanyInfo = companyInformation as any;
+  
+  // Use navigation from config or override
+  const navigation = navigationOverride || config?.navigation?.header || [];
+  
+  // Build logo
+  const logoImage = logoImageOverride || getLogoUrl(websitePhotos) || props?.logo?.image;
+  const logoText = logoTextOverride || apiCompanyInfo?.company_name || props?.logo?.text || '';
+  const cta_button = props?.cta_button;
+  
+  const logo = {
+    text: logoText || '',
+    href: props?.logo?.href || '/',
+    image: logoImage,
+  };
+  
+  const dynamicNavigation = navigation;
+
+  const getVariantClasses = () => {
+    switch (variant) {
+      case 'minimal':
+        return 'py-4';
+      case 'centered':
+        return 'py-6';
+      case 'standard':
+      default:
+        return 'py-4';
+    }
+  };
+
+  const HoverDropdown = ({ label, href, children }: { label: string; href?: string; children: React.ReactNode }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+    const handleMouseEnter = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      setIsOpen(true);
+    };
+
+    const handleMouseLeave = () => {
+      const id = setTimeout(() => {
+        setIsOpen(false);
+      }, 100);
+      timeoutRef.current = id;
+    };
+
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+      };
+    }, []);
+
+    return (
+      <div 
+        className="relative"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <Link
+          href={href || '#'}
+          className="flex cursor-pointer items-center gap-0.5 rounded-lg px-1.5 py-1 text-sm font-medium text-secondary outline-focus-ring transition duration-100 ease-linear hover:text-secondary_hover focus-visible:outline-2 focus-visible:outline-offset-2"
+        >
+          <span className="px-0.5">{label}</span>
+          <ChevronDown className={cx("size-4 stroke-[2.625px] text-fg-quaternary transition duration-100 ease-linear", isOpen ? "-rotate-180" : "rotate-0")} />
+        </Link>
+        
+        {isOpen && (
+          <div 
+            className="absolute top-full left-0 z-50 mt-1 origin-top animate-in fade-in slide-in-from-top-1 duration-75 ease-out"
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <div className="w-max max-w-sm">
+              {children}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const headerNavItems = dynamicNavigation.map((navItem) => {
+    if (navItem.children && navItem.children.length > 0) {
+      return {
+        label: navItem.label,
+        href: navItem.href,
+        menu: (
+          <GenericHeaderComponent 
+            items={navItem.children.map(child => ({
+              label: child.label,
+              href: child.href,
+              subtitle: child.subtitle,
+            }))}
+          />
+        ),
+      };
+    }
+    return {
+      label: navItem.label,
+      href: navItem.href,
+    };
+  });
+
+  return (
+    <header 
+      ref={headerRef}
+      className={cx(
+        "sticky top-0 z-50 flex h-18 w-full items-center justify-center backdrop-blur-md bg-primary/80 md:h-20",
+        getVariantClasses()
+      )}
+    >
+      <div className="flex size-full max-w-container flex-1 items-center pr-3 pl-4 md:px-8">
+        <div className="flex w-full justify-between gap-4">
+          <div className="flex flex-1 items-center gap-5">
+            <Link href={logo?.href || '/'} className="flex items-center space-x-2">
+              {logoImage ? (
+                <img 
+                  src={logoImage} 
+                  alt={logoText}
+                  className="h-8 w-8 object-contain"
+                />
+              ) : (
+                <div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center">
+                  <span className="text-white font-bold text-lg">
+                    {logoText?.charAt(0)?.toUpperCase() || ''}
+                  </span>
+                </div>
+              )}
+              <span className="text-xl font-bold text-primary hidden md:block">{logoText}</span>
+            </Link>
+
+            <nav className="max-md:hidden">
+              <ul className="flex items-center gap-0.5">
+                {headerNavItems.map((navItem) => (
+                  <li key={navItem.label}>
+                    {navItem.menu ? (
+                      <HoverDropdown label={navItem.label} href={navItem.href}>
+                        {navItem.menu}
+                      </HoverDropdown>
+                    ) : (
+                      <Link
+                        href={navItem.href || '#'}
+                        className="flex cursor-pointer items-center gap-0.5 rounded-lg px-1.5 py-1 text-sm font-medium text-secondary outline-focus-ring transition duration-100 ease-linear hover:text-secondary_hover focus:outline-offset-2 focus-visible:outline-2"
+                      >
+                        <span className="px-0.5">{navItem.label}</span>
+                      </Link>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          </div>
+
+          <div className="hidden items-center gap-3 md:flex">
+            <Button 
+              href={cta_button?.href || "/contact"} 
+              color="primary" 
+              size="lg"
+            >
+              {cta_button?.label || "Get Started"}
+            </Button>
+          </div>
+
+          <AriaDialogTrigger>
+            <AriaButton
+              aria-label="Toggle navigation menu"
+              className={({ isFocusVisible, isHovered }) =>
+                cx(
+                  "group ml-auto cursor-pointer rounded-lg p-2 md:hidden",
+                  isHovered && "bg-primary_hover",
+                  isFocusVisible && "outline-2 outline-offset-2 outline-focus-ring",
+                )
+              }
+            >
+              <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                <path
+                  className="hidden text-secondary group-aria-expanded:block"
+                  d="M18 6L6 18M6 6L18 18"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  className="text-secondary group-aria-expanded:hidden"
+                  d="M3 12H21M3 6H21M3 18H21"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </AriaButton>
+            <AriaPopover
+              triggerRef={headerRef}
+              className="h-calc(100%-72px) scrollbar-hide w-full overflow-y-auto shadow-lg md:hidden"
+              offset={0}
+              crossOffset={20}
+              containerPadding={0}
+              placement="bottom left"
+            >
+              <AriaDialog className="outline-hidden">
+                <nav className="w-full bg-primary shadow-lg">
+                  <ul className="flex flex-col gap-0.5 py-5">
+                    {headerNavItems.map((navItem) =>
+                      navItem.menu ? (
+                        <MobileNavItem 
+                          key={navItem.label} 
+                          label={navItem.label}
+                        >
+                          {navItem.menu}
+                        </MobileNavItem>
+                      ) : (
+                        <MobileNavItem 
+                          key={navItem.label} 
+                          label={navItem.label} 
+                          href={navItem.href}
+                        />
+                      ),
+                    )}
+                  </ul>
+
+                  <div className="flex flex-col gap-3 border-t border-secondary px-4 py-6">
+                    <Button 
+                      href={cta_button?.href || "/contact"} 
+                      color="primary" 
+                      size="lg"
+                    >
+                      {cta_button?.label || "Get Started"}
+                    </Button>
+                  </div>
+                </nav>
+              </AriaDialog>
+            </AriaPopover>
+          </AriaDialogTrigger>
+        </div>
+      </div>
+    </header>
+  );
+}