Navigation

Atlas-Navigation besteht aus Topbar (Pflicht), optionaler Sidebar und Footer. Du siehst diese Page bereits in der echten App-Shell — scroll nach oben für Topbar, nach unten für Footer.

Atlas Spec

Topbar

Sticky, h-14, Backdrop-Blur. Slots von links: Logo + AppName + Breadcrumb · Spacer · User-Menu · Theme-Toggle.

Position: sticky top-0 z-40
Höhe: h-14 (FZDB h-12 / Mailer h-16 — Atlas wählt mittleren Weg)
Background: bg-card/80 backdrop-blur-xl
Border: border-b border-border/60

components/layout/topbar.tsxtsx

<header className="sticky top-0 z-40 border-b bg-card/80 backdrop-blur-xl">
  <div className="mx-auto flex h-14 max-w-7xl items-center gap-3 px-4">
    <Link href="/">
      <Image src="/zvv-logo.svg" alt="ZVV" />
      <span>App-Name</span>
    </Link>
    <Breadcrumbs />
    <div className="flex-1" />
    <UserMenu />
    <ThemeToggle />
  </div>
</header>

Breadcrumbs

Pfad-basiert, automatisch generiert. SEGMENT_LABELS-Map mapped Slugs zu lesbaren Labels. Navigiere durch verschiedene Sektionen (oben in der Topbar sichtbar) um es live zu sehen.

Beispiel: /forms/simple → Home › Formulare › Einfach

User-Menu / UserSwitcher

Im Atlas-Showcase ein Mock-Persona-Switcher (Live-Demo für RBAC). In Atlas-Apps ein User-Menu mit Profil + Logout. Klick oben rechts auf den Avatar.

Theme-Toggle

4-State Cycle: System → Light → Dark → Auto. Auto folgt einem festen Clock-Fenster 08:00–18:00 Zürich-Zeit (lib/zurich-time.ts, DST-korrekt via Intl). Klick rechts oben (Icon ändert sich pro State).

Footer

Konsistent über alle Atlas-Apps. Links: Copyright. Mitte: Atlas-Spec + Repo + Changelog. Rechts: Version + Commit + Stack-Hinweis.

components/layout/footer.tsxtsx

<footer className="border-t bg-card/40">
  <div className="flex max-w-7xl gap-3 px-4 py-6 text-[11px] text-muted-foreground">
    <span>© {year} ZVV · App-Name</span>
    <Link href={ATLAS_DOCS}>Spec</Link>
    <Link href={REPO}>Repo</Link>
    <span className="font-mono">v{version} · {commit}</span>
  </div>
</footer>