Fertig

components/site-header.tsx

@@ -0,0 +1,100 @@
+"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" />
+      )}
+    </>
+  );
+}