florian.wilde
0f20ad6527
Betrifft UI-Texte (DE/EN/PL), Route (/intern/bereiche -> /intern/essenszeiten), Code-Kommentare, Changelog und README. Fachlich unverändert (weiterhin die Tabelle/Komponente "sections"/ SectionManager im Code), da "Essenszeiten" den Zeitbezug des Features klarer ausdrückt als der bisherige Sammelbegriff.
106 lines
3.3 KiB
TypeScript
106 lines
3.3 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";
|
|
import { useDict } from "@/components/i18n/LocaleProvider";
|
|
import LanguageSwitcher from "@/components/i18n/LanguageSwitcher";
|
|
|
|
export default function AppHeader({
|
|
role,
|
|
displayName,
|
|
}: {
|
|
role: Role;
|
|
displayName: string;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const dict = useDict();
|
|
|
|
const menuLinks = [
|
|
{ href: "/intern", label: dict.header.weekPlan },
|
|
{ href: "/intern/essenszeiten", label: dict.header.sections },
|
|
{ href: "/intern/gerichte", label: dict.header.dishes },
|
|
{ href: "/intern/kennzeichnung", label: dict.header.labels },
|
|
{ href: "/intern/vorschlaege", label: dict.header.suggestions },
|
|
];
|
|
const adminLinks = [
|
|
{ href: "/admin", label: dict.header.users },
|
|
{ href: "/admin/design", label: dict.header.design },
|
|
];
|
|
|
|
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">{dict.header.canteen}</span>
|
|
|
|
<nav
|
|
className="flex flex-wrap items-center gap-x-1 gap-y-1"
|
|
aria-label={dict.header.menuGroup}
|
|
>
|
|
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
|
|
{dict.header.menuGroup}
|
|
</span>
|
|
{menuLinks.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={dict.header.adminGroup}
|
|
>
|
|
<span className="mr-1 text-xs uppercase tracking-wider text-white/50">
|
|
{dict.header.adminGroup}
|
|
</span>
|
|
{adminLinks.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"
|
|
>
|
|
{dict.header.viewMenu}
|
|
</Link>
|
|
|
|
<div className="ml-auto flex items-center gap-3">
|
|
<LanguageSwitcher />
|
|
<Link
|
|
href="/konto"
|
|
title={dict.header.myAccount}
|
|
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">
|
|
{dict.common.logout}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|