- Abgespecktes SM-2 mit drei Bewertungsstufen statt sechs - Abstaende 1, 3, dann Abstand mal Leichtigkeit; gedeckelt bei 180 Tagen - "nochmal" bringt die Karte in derselben Sitzung wieder - Taeglicher Stapel, gedeckelt auf 20 Karten, ueberfaellige zuerst - Fuenf Faecher zur Anzeige, abgeleitet aus dem Abstand - Filter nach Themenblock fuer gezieltes Ueben - Lernmodus fuers Handy: grosse Flaechen, Antippen, Wischen, kein Hover; am Rechner zusaetzlich Leertaste und Tasten 1/2/3 - Tabellen karte und karten_verlauf, jede Bewertung wird mitgeschrieben - Merkkarten zaehlen im Wochenfortschritt mit, gelernt ab Fach 4 - Kopfzeile am Handy einzeilig, Tipp-Hervorhebung abgeschaltet - 29 neue Tests, insgesamt 133 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { usePathname } from 'next/navigation';
|
||
import { ThemaUmschalter } from './ThemaUmschalter';
|
||
|
||
export type Navigationseintrag = { pfad: string; titel: string };
|
||
|
||
export function Kopfzeile({
|
||
eintraege,
|
||
name,
|
||
rolle,
|
||
abmeldeAktion,
|
||
}: {
|
||
eintraege: Navigationseintrag[];
|
||
name: string;
|
||
rolle: string;
|
||
abmeldeAktion: () => Promise<void>;
|
||
}) {
|
||
const pfad = usePathname();
|
||
|
||
function istAktiv(ziel: string): boolean {
|
||
if (ziel === '/') return pfad === '/';
|
||
return pfad === ziel || pfad.startsWith(`${ziel}/`);
|
||
}
|
||
|
||
return (
|
||
<header className="kopf">
|
||
<div className="kopf-innen">
|
||
<Link href="/" className="marke">
|
||
Lern<span className="marke-akzent">-Bar</span>
|
||
</Link>
|
||
|
||
<nav className="hauptnavigation" aria-label="Hauptbereiche">
|
||
{eintraege.map((e) => (
|
||
<Link key={e.pfad} href={e.pfad} aria-current={istAktiv(e.pfad) ? 'page' : undefined}>
|
||
{e.titel}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
|
||
<div className="kopf-rechts">
|
||
<span className="leise" style={{ color: '#cfe2e9', fontSize: '0.85rem' }} title={`${name} – ${rolle}`}>
|
||
{name} · {rolle}
|
||
</span>
|
||
<ThemaUmschalter />
|
||
<form action={abmeldeAktion}>
|
||
<button type="submit" className="kopf-knopf">
|
||
Abmelden
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
);
|
||
}
|