Harlekin
4b794ec9a8
**Suche.** Sie startete auf den Fallakten, und man musste die Art vorher wählen - die falsche Reihenfolge: wer einen Namen eintippt, weiss noch nicht, ob er eine Fallakte, ein Dokument oder eine Personalakte sucht. Er will wissen, wo der Name vorkommt. „Alle" ist jetzt der Auslieferungszustand und zeigt je Art fünf Treffer als eigenen Block, mit dem Weg in die volle Liste daneben. Getrennte Blöcke statt einer gemischten Liste nach Rang: ein Aktenzeichen neben einem Namen neben einer Dokumentnummer hat keine erkennbare Ordnung. Die einzelnen Arten bleiben als Filter, und nur dort gibt es Facetten und Blättern - beides bezieht sich auf eine Grundmenge, ein Statusfilter über Fall- und Personalakten zugleich wäre bei der einen ein Filter und bei der anderen ein Ausschluss. **Kopfzeile.** Die Bereiche waren Textlinks: von einem Fliesstextlink nicht zu unterscheiden und ohne Hinweis darauf, wo man gerade ist. Jetzt dieselbe Knopfform wie alles Bedienbare, der aktive Bereich gefüllt. Der gefüllte Zustand trägt hellen Text statt der Akzentfarbe: auf der getönten Fläche wäre Akzent auf Akzent und der Kontrast fiele unter die Untergrenze. Dazu etwas grosszügigere Polsterung an beiden Knopfgrössen, .btn-count für Zahlen in Knöpfen, und kein Doppelring mehr am Profilbild. Nachgesehen mit dem gebauten CSS im Browser, hell und dunkel.
38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
|
|
/**
|
|
* Die Bereiche der Anwendung in der Kopfzeile.
|
|
*
|
|
* Sie waren blosse Textlinks — von einem Fliesstextlink nicht zu unterscheiden
|
|
* und ohne Hinweis darauf, wo man gerade ist. Jetzt tragen sie dieselbe
|
|
* Knopfform wie alles Bedienbare, und der Bereich, in dem man steht, ist
|
|
* gefüllt.
|
|
*
|
|
* Der Vergleich läuft über den Pfad, nicht über die vollständige Adresse: die
|
|
* Suche bleibt hervorgehoben, während man ihre Filter wechselt.
|
|
*/
|
|
export function NavLinks({ links }: { links: { href: string; label: string }[] }) {
|
|
const pfad = usePathname()
|
|
|
|
return (
|
|
<nav className="flex flex-wrap gap-1.5">
|
|
{links.map((eintrag) => {
|
|
const aktiv = pfad === eintrag.href || pfad.startsWith(eintrag.href + '/')
|
|
return (
|
|
<Link
|
|
key={eintrag.href}
|
|
href={eintrag.href}
|
|
aria-current={aktiv ? 'page' : undefined}
|
|
className="btn btn-sm"
|
|
>
|
|
{eintrag.label}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
)
|
|
}
|