AppSidebar

Top-level application sidebar with collapse support. Compound: AppSidebar + Header, Search, Nav, Item, Section, Separator, Scroll, Footer.

Preview

Usage

import { AppSidebar } from '@ramtt/ui'

<AppSidebar collapsed={false}>
  <AppSidebar.Header>{/* workspace switcher */}</AppSidebar.Header>
  <AppSidebar.Nav>
    <AppSidebar.Item icon={<Icon />} active>Dashboard</AppSidebar.Item>
  </AppSidebar.Nav>
  <AppSidebar.Footer name="Malte" onSettingsClick={openSettings} />
</AppSidebar>

Props

Prop	Type	Default	Description
collapsed	`boolean`	false	Collapse to icon-only width
children*	`ReactNode`	—	Sidebar sections (Header, Nav, Footer, …)
className	`string`	—	Additional Tailwind classes