101 lines
3.4 KiB
TypeScript
101 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useState, useEffect } from "react";
|
|
import { siteConfig } from "@/data/site-content";
|
|
import { BrandLogo } from "@/components/brand-logo";
|
|
|
|
export function SiteHeader() {
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const [scrolled, setScrolled] = useState(false);
|
|
const close = () => setMenuOpen(false);
|
|
|
|
useEffect(() => {
|
|
const handler = () => setScrolled(window.scrollY > 60);
|
|
window.addEventListener("scroll", handler, { passive: true });
|
|
return () => window.removeEventListener("scroll", handler);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<div className="site-utility-bar">
|
|
<div className="container utility-inner">
|
|
<div className="utility-list">
|
|
<a href={siteConfig.phoneHref} className="utility-link">
|
|
<span className="utility-label">PHONE:</span> {siteConfig.phoneDisplay}
|
|
</a>
|
|
<span className="utility-text">LOCATION: {siteConfig.address.cityStateZip}</span>
|
|
<span className="utility-text">HOURS: Mon - Fri 8 AM - 5 PM</span>
|
|
</div>
|
|
<div className="utility-list">
|
|
<span className="utility-text">DELIVERY QUOTED AT PURCHASE</span>
|
|
<Link href={siteConfig.mapUrl} target="_blank" rel="noreferrer" className="utility-link">
|
|
OPEN MAP
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<header className={`site-header${scrolled ? " site-header--scrolled" : ""}`}>
|
|
<div className="container site-header-inner">
|
|
<Link href="/" className="brand" aria-label={siteConfig.name} onClick={close}>
|
|
<span className="brand-mark brand-mark-logo" aria-hidden="true">
|
|
<BrandLogo />
|
|
</span>
|
|
</Link>
|
|
|
|
<nav className="main-nav" aria-label="Primary">
|
|
{siteConfig.nav.map((item) => (
|
|
<Link key={item.href} href={item.href} className="nav-link">
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="header-actions">
|
|
<Link href="/contact" className="button button-primary">
|
|
REQUEST A QUOTE
|
|
</Link>
|
|
</div>
|
|
|
|
<button
|
|
className="mobile-menu-toggle"
|
|
aria-label={menuOpen ? "Menü schließen" : "Menü öffnen"}
|
|
aria-expanded={menuOpen}
|
|
onClick={() => setMenuOpen((o) => !o)}
|
|
>
|
|
<span className={`hamburger${menuOpen ? " hamburger--open" : ""}`}>
|
|
<span />
|
|
<span />
|
|
<span />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Mobile drawer */}
|
|
<div
|
|
className={`mobile-nav${menuOpen ? " mobile-nav--open" : ""}`}
|
|
aria-hidden={!menuOpen}
|
|
aria-label="Mobile Navigation"
|
|
>
|
|
<nav className="mobile-nav-links">
|
|
{siteConfig.nav.map((item) => (
|
|
<Link key={item.href} href={item.href} className="mobile-nav-link" onClick={close}>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
<Link href="/contact" className="button button-primary mobile-nav-cta" onClick={close}>
|
|
REQUEST A QUOTE
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Backdrop */}
|
|
{menuOpen && (
|
|
<div className="mobile-nav-overlay" onClick={close} aria-hidden="true" />
|
|
)}
|
|
</>
|
|
);
|
|
}
|