Skip to content
Twentyfirst UIHalo

Sidebar Shell

A complete screen built only from kit parts: AppShell, Sidebar, WorkspaceSwitcher, UserMenu, Badge, Button, IconButton, KeyValue …

View as Markdown

The app shell with a labelled sidebar instead of the icon rail: AppShell navigation="sidebar".

  • The sidebar sits on the dark frame, the page on the light sheet, with the side panel and dock as in every other shell.
  • sidebarGroups takes the same groups as Sidebar; without it, nav becomes one group.
  • workspaces puts a WorkspaceSwitcher at the top, user and userMenu a UserMenu at the foot; both turn compact when the sidebar collapses. Further Sidebar props go in sidebar (storageKey, shortcut, linkAs).
  • On phones the sidebar becomes a drawer behind a menu button above the page.

Invoices

April · 42 sent, 7 open

€48,210Billed+12%
€6,940Open7 invoices
€1,280Overdue2 invoices

Latest

Sent this week

INV-2041 · Northwind
Open
INV-2040 · Kestrel Bank
Paid
INV-2039 · Copperline
Paid

Payout

Next on Friday

Amount
€18,420
Invoices
42
Fees
€312