florian.wilde
2a62d07dc4
Eine Leiste für alles: Gruppe "Speiseplan" (Wochenplan, Gerichte, Allergene & Zusatzstoffe) und für Admins zusätzlich Gruppe "Verwaltung" (Benutzer, Design). Aktiver Menüpunkt wird hervorgehoben, die Konto-Seite nutzt denselben Header – kein Hin- und Herspringen mehr zwischen Kantinen-Bereich und Verwaltung.
101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
// Gemeinsamer Kopfbereich für alle internen Seiten. Statt zweier
|
|
// getrennter Bereiche (Kantine/Verwaltung) gibt es eine Navigation:
|
|
// Admins sehen zusätzlich die Verwaltungs-Links, der aktive Punkt
|
|
// wird hervorgehoben.
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import type { Role } from "@/lib/types";
|
|
|
|
const MENU_LINKS = [
|
|
{ href: "/intern", label: "Wochenplan" },
|
|
{ href: "/intern/gerichte", label: "Gerichte" },
|
|
{ href: "/intern/kennzeichnung", label: "Allergene & Zusatzstoffe" },
|
|
];
|
|
|
|
const ADMIN_LINKS = [
|
|
{ href: "/admin", label: "Benutzer" },
|
|
{ href: "/admin/design", label: "Design" },
|
|
];
|
|
|
|
export default function AppHeader({
|
|
role,
|
|
displayName,
|
|
}: {
|
|
role: Role;
|
|
displayName: string;
|
|
}) {
|
|
const pathname = usePathname();
|
|
|
|
const linkClass = (href: string) =>
|
|
`rounded px-2 py-0.5 transition-colors hover:bg-white/10 ${
|
|
pathname === href ? "bg-white/20 font-semibold" : "text-white/90"
|
|
}`;
|
|
|
|
return (
|
|
<header className="bg-[var(--c-primary-dark)] text-white">
|
|
<div className="max-w-[1600px] mx-auto w-full px-4 py-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
|
|
<span className="font-bold text-base">Kantine</span>
|
|
|
|
<nav
|
|
className="flex flex-wrap items-center gap-x-1 gap-y-1"
|
|
aria-label="Speiseplan"
|
|
>
|
|
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
|
|
Speiseplan
|
|
</span>
|
|
{MENU_LINKS.map((l) => (
|
|
<Link key={l.href} href={l.href} className={linkClass(l.href)}>
|
|
{l.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
{role === "admin" && (
|
|
<nav
|
|
className="flex flex-wrap items-center gap-x-1 gap-y-1"
|
|
aria-label="Verwaltung"
|
|
>
|
|
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
|
|
Verwaltung
|
|
</span>
|
|
{ADMIN_LINKS.map((l) => (
|
|
<Link key={l.href} href={l.href} className={linkClass(l.href)}>
|
|
{l.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
)}
|
|
|
|
<Link
|
|
href="/"
|
|
className="rounded px-2 py-0.5 text-white/70 hover:bg-white/10"
|
|
>
|
|
Speisekarte ansehen
|
|
</Link>
|
|
|
|
<div className="ml-auto flex items-center gap-3">
|
|
<Link
|
|
href="/konto"
|
|
title="Mein Konto"
|
|
className={`rounded px-2 py-0.5 hover:bg-white/10 ${
|
|
pathname === "/konto"
|
|
? "bg-white/20 font-semibold"
|
|
: "text-white/80"
|
|
}`}
|
|
>
|
|
{displayName}
|
|
</Link>
|
|
<form action="/logout" method="post">
|
|
<button type="submit" className="btn btn-del">
|
|
Abmelden
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|