App-Shell

Rahmen für Anwendungen: Sidebar, Topbar und ein fokussierbarer Inhaltsbereich. Ein Skip-Link führt direkt in den Inhalt, ein Wechsel der pathname-Prop setzt den Fokus dorthin. Unterhalb von md wird die Sidebar zum Sheet und schließt sich nach einem Linkwechsel.

Einbindung

Die Shell nimmt Sidebar und Topbar als Inhalte entgegen. Link-Komponenten bleiben austauschbar; die Shell rendert selbst keine Navigation.

app.tsxtsx

import { AppShell, AppTopbar, UserMenu } from '@lukasfend/ui/blocks/app-shell';

<AppShell
  pathname={pathname}
  sidebar={<SidebarNavigation />}
  topbar={
    <AppTopbar
      breadcrumb={[{ label: 'Station 3B' }, { label: 'Dienstplan' }]}
      search
      onSearch={openSearch}
      actions={
        <UserMenu
          name="Lena Maier"
          email="lena@station3b.de"
          onSignOut={signOut}
        />
      }
    />
  }
>
  <Dashboard />
</AppShell>;