Initial commit

src/components/Header.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+const navLinks = [
+  { href: "/", label: "Start" },
+  { href: "/ueber-uns", label: "Über uns" },
+  { href: "/informationen", label: "Informationen" },
+  { href: "/kalender", label: "Kalender" },
+  { href: "/fahrten", label: "Beiträge" },
+  { href: "/bilder", label: "Bilder" },
+];
+
+export default function Header({ siteName }: { siteName: string }) {
+  const pathname = usePathname() ?? "/";
+  const [openPath, setOpenPath] = useState<string | null>(null);
+  const open = openPath === pathname;
+
+  useEffect(() => {
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpenPath(null);
+    };
+    document.addEventListener("keydown", closeOnEscape);
+    return () => document.removeEventListener("keydown", closeOnEscape);
+  }, []);
+
+  const isActive = (href: string) =>
+    href === "/" ? pathname === "/" : pathname.startsWith(href);
+
+  return (
+    <header className="app-header">
+      <div className="container header-content">
+        <Link href="/" className="brand">
+          <img
+            src="/logo.svg"
+            alt={`${siteName} Logo`}
+            className="brand-logo"
+          />
+          <span>{siteName}</span>
+        </Link>
+        <button
+          className="nav-toggle"
+          type="button"
+          aria-expanded={open}
+          aria-controls="primary-navigation"
+          aria-label={open ? "Menü schließen" : "Menü öffnen"}
+          data-open={String(open)}
+          onClick={() => setOpenPath(open ? null : pathname)}
+        >
+          <span className="nav-toggle-bars" aria-hidden="true">
+            <span />
+            <span />
+            <span />
+          </span>
+        </button>
+        <nav
+          className="nav-links"
+          id="primary-navigation"
+          data-open={String(open)}
+        >
+          {navLinks.map(({ href, label }) => {
+            const active = isActive(href);
+            return (
+              <Link
+                key={href}
+                href={href}
+                aria-current={active ? "page" : undefined}
+                className={active ? "active" : undefined}
+                onClick={() => setOpenPath(null)}
+              >
+                {label}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </header>
+  );
+}