54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useState } from "react";
|
|
|
|
const navigation = [
|
|
["Start", "/"],
|
|
["Leistungen", "/leistungen"],
|
|
["Funkgeräte-Service", "/funkgeraete-service"],
|
|
["Reparatur", "/reparatur"],
|
|
["Über uns", "/ueber-uns"],
|
|
["Kontakt", "/kontakt"],
|
|
] as const;
|
|
|
|
export default function Header() {
|
|
const pathname = usePathname();
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
return (
|
|
<header className="site-header">
|
|
<div className="container header-inner">
|
|
<Link href="/" className="brand" aria-label="Funktechnik Schubert Startseite" onClick={() => setMenuOpen(false)}>
|
|
<Image
|
|
src="/funktechnik_schubert_logo.jpg"
|
|
alt="Funktechnik Schubert"
|
|
width={1672}
|
|
height={941}
|
|
priority
|
|
className="brand-logo"
|
|
/>
|
|
</Link>
|
|
<button
|
|
className="menu-toggle"
|
|
type="button"
|
|
aria-expanded={menuOpen}
|
|
aria-controls="site-navigation"
|
|
onClick={() => setMenuOpen((open) => !open)}
|
|
>
|
|
Menü
|
|
</button>
|
|
<nav id="site-navigation" className={menuOpen ? "nav is-open" : "nav"} aria-label="Hauptnavigation">
|
|
{navigation.map(([label, href]) => (
|
|
<Link key={href} href={href} aria-current={pathname === href ? "page" : undefined} onClick={() => setMenuOpen(false)}>
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
<Link className="header-cta" href="/reparatur">Reparatur anfragen</Link>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|