kleradesign

layoutsidenav

DESIGN.md

sidenav

the left column. 290px wide, full height below the brand corner. internally scrollable so long nav lists or contextual panels never blow out the layout.

not a separate component — it's the sidenav slot of DashboardShell. apps fill it with whatever fits: navigation links (typical), identity card + nav (patient/provider/hq), or contextual side panels (any detail view).

import from @klera/ui/components/dashboard/DashboardShell (sidenav slot)

Padding: 28px 24px 28px 27px · Gap between sections: 24px · Border-right: 1px var(--divider) · Overflow: auto (vertical).

variants

what apps put here
  • navigation links — the staple. one per app section, with optional sub-nav for the active section.
  • identity card (provider / hq) — name, role, email at the top of the column.
  • care team panel (patient) — provider + nurse names with sky-gradient avatar block.
  • scenario / dev affordances (patient fixture flow) — pinned to the bottom via margin-top: auto.
  • footer chrome — a small note like "canonical rules in DESIGN.md" (this design app).