87 lines
2.6 KiB
TypeScript
87 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useEffect, useState } from "react";
|
|
import type { SettingsContent } from "@/lib/content/types";
|
|
|
|
const navigation = [
|
|
["Start", "/"],
|
|
["Leistungen", "/leistungen"],
|
|
["Funkgeräte-Service", "/funkgeraete-service"],
|
|
["Reparatur", "/reparatur"],
|
|
["Über uns", "/ueber-uns"],
|
|
["Kontakt", "/kontakt"],
|
|
] as const;
|
|
|
|
const fallbackSettings = {
|
|
siteName: "Funktechnik Schubert",
|
|
logoUrl: "/funktechnik_schubert_logo.jpg",
|
|
headerCta: { label: "Reparatur anfragen", href: "/reparatur" },
|
|
};
|
|
|
|
export default function Header() {
|
|
const pathname = usePathname();
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
const [settings, setSettings] = useState(fallbackSettings);
|
|
|
|
useEffect(() => {
|
|
let active = true;
|
|
|
|
async function loadSettings() {
|
|
try {
|
|
const response = await fetch("/api/content/settings");
|
|
const result = await response.json() as { settings?: SettingsContent };
|
|
if (active && response.ok && result.settings) {
|
|
setSettings({
|
|
siteName: result.settings.siteName,
|
|
logoUrl: result.settings.logoUrl,
|
|
headerCta: result.settings.headerCta,
|
|
});
|
|
}
|
|
} catch {
|
|
if (active) setSettings(fallbackSettings);
|
|
}
|
|
}
|
|
|
|
void loadSettings();
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<header className="site-header">
|
|
<div className="container header-inner">
|
|
<Link href="/" className="brand" aria-label={`${settings.siteName} Startseite`} onClick={() => setMenuOpen(false)}>
|
|
<Image
|
|
src={settings.logoUrl}
|
|
alt={settings.siteName}
|
|
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={settings.headerCta.href}>{settings.headerCta.label}</Link>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|