Goldebek/src/components/Header.tsx

"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>
  );
}