Andrei Laas
3987e8f54f
Die Flaechenverteilung war verkehrt herum. Blau lag auf dem Groessten, was die Anmeldeseite zu vergeben hat, und Rosa nur in Andeutungen daneben — bei einer Marke, deren Schriftzug auf Rosa steht und deren Manual Rosa zuerst nennt. Sichtbar wurde es am Logo. Es bringt sein rosa Feld selbst mit, weil §1.2 den Schriftzug nur zur Gaenze auf Rosa zulaesst. Auf einer blauen Flaeche steht dieses Feld als ausgeschnittenes Rechteck darauf. Auf Weiss ist es dagegen richtig — §4.1 verlangt fuer weissen Untergrund genau das, ein rechteckiges rosa Feld. Falsch war also nicht das Logo, sondern die blaue Flaeche darunter. Rosa bekommen jetzt: das Panel der Anmeldeseite und das Band ueber der Anwendung aus Kopfzeile und Logokopf der Seitenleiste. Beide zusammen sind ein durchgehender Streifen, in dem das Logo aufgeht statt darauf zu liegen — was §3.1 mit "in einem grossflaechigen rosa Umfeld eingebettet" meint. Blau bleibt, was es ist: Knopf, Link, Fokusring, ausgewaehlter Eintrag. Das ist dasselbe Verhaeltnis, aus dem der Schriftzug besteht — blaue Lettern auf rosa Feld — und es ist das einzige, das traegt. Weiss auf Rosa sind 2.18:1. Auf den rosa Flaechen steht deshalb nichts Weisses und nichts Gedaempftes mehr. ink kommt auf 7.47:1, brand-700 auf 6.60:1; ink-muted lag bei 2.33:1 und ist aus Kopfzeile, Glocke und Logokopf verschwunden. Gestuft wird ueber Groesse und Gewicht statt ueber Transparenz — eine aufgehellte Schrift ist genau das, was auf dieser Flaeche durchfaellt. Das Raster auf dem Panel ist von Weiss auf ink gewechselt: auf Rosa war es nicht mehr zu sehen. Lint, Typen, Schemaabgleich, 552 Tests und der Build sind sauber. Im Browser nicht gesehen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
76 lines
3.0 KiB
TypeScript
76 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { LogOut, Menu } from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
import { logout } from "@/actions/auth";
|
|
import type { OpenNote } from "@/lib/notes";
|
|
import { NewHireButton } from "./NewHireButton";
|
|
import { NotesBell } from "./NotesBell";
|
|
|
|
const TITLES: Record<string, string> = {
|
|
"/": "Übersicht",
|
|
"/employees": "Mitarbeiter:innen",
|
|
"/orgchart": "Organigramm",
|
|
"/positions": "Positionen",
|
|
"/reports": "Berichte",
|
|
"/audit": "Audit-Log",
|
|
};
|
|
|
|
function titleFor(pathname: string): string {
|
|
if (TITLES[pathname]) return TITLES[pathname];
|
|
const match = Object.keys(TITLES).find((key) => key !== "/" && pathname.startsWith(key));
|
|
return match ? TITLES[match] : "Alpenwerk HR";
|
|
}
|
|
|
|
type TopbarProps = {
|
|
userLabel: string;
|
|
openNotes: OpenNote[];
|
|
kollegen: { id: string; name: string; sichtbar: boolean }[];
|
|
onOpenNav: () => void;
|
|
};
|
|
|
|
export function Topbar({ userLabel, openNotes, kollegen, onOpenNav }: TopbarProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
// Sticky, with the notch inset added to its top padding: on an iPhone in
|
|
// landscape the bar would otherwise sit under the rounded corner.
|
|
//
|
|
// Rosa und nicht Weiss: zusammen mit dem Kopf der Seitenleiste bildet
|
|
// dieser Streifen das durchgehende Markenband ueber der Anwendung. Auf
|
|
// Weiss stand das Logo daneben als ausgeschnittenes Rechteck, weil es
|
|
// sein rosa Feld mitbringt; in einem rosa Band geht es darin auf.
|
|
//
|
|
// Alles Geschriebene darauf ist ink: ink-muted kommt auf Rosa nur auf
|
|
// 2.33:1 und faellt durch. Aufgehellt wird nichts mehr, gestuft wird
|
|
// ueber Groesse und Gewicht.
|
|
<header className="sticky top-0 z-20 flex h-14 shrink-0 items-center justify-between border-b border-accent-600/40 bg-accent-500 px-3 pt-[env(safe-area-inset-top)] sm:px-6">
|
|
<div className="flex min-w-0 items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onOpenNav}
|
|
aria-label="Navigation öffnen"
|
|
className="-ml-1 rounded p-2 text-ink hover:bg-accent-100 lg:hidden"
|
|
>
|
|
<Menu className="h-5 w-5" />
|
|
</button>
|
|
<h1 className="truncate text-base font-bold text-ink">{titleFor(pathname)}</h1>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-1 sm:gap-4">
|
|
<NotesBell notes={openNotes} kollegen={kollegen} />
|
|
<NewHireButton />
|
|
<div className="flex items-center gap-2 text-sm sm:border-l sm:border-ink/25 sm:pl-4">
|
|
{/* The name is the first thing worth dropping on a narrow screen —
|
|
the account is still reachable via the sign-out control. */}
|
|
<span className="hidden font-semibold text-ink md:inline">{userLabel}</span>
|
|
<form action={logout}>
|
|
<button type="submit" aria-label="Abmelden" className="rounded p-2 text-ink hover:bg-accent-100">
|
|
<LogOut className="h-4 w-4" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|