Sidebar
1. Left Navigation Sidenav (side='left', variant='collapsible')
2. Right Property Inspector Panel (side='right')
3. Drag-Resizable Rail (resizable={true})
4. Floating Card Variant (variant='floating')
5. Inset Panel Variant (variant='inset')
Compound Components & Sub-Component API Documentation
1. <Sidebar> Root Container
Root panel primitive managing context state (`side`, `variant`, `collapsed`, `resizable`).
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "left" | "right" | left | Sidebar dock side: "left" (Sidenav, left panel) or "right" (Configurator, Inspector). Default "left". |
| variant | "fixed" | "collapsible" | "floating" | "inset" | fixed | Sidebar visual variant: fixed width, collapsible rail, floating card, or inset panel. Default "fixed". |
| collapsibleMode | "icon" | "offcanvas" | "none" | icon | Collapsible mode: "icon" rail collapse, "offcanvas" full hide, or "none". Default "icon". |
| collapsed | boolean | — | Controlled collapsed state. |
| onCollapsedChange | (collapsed: boolean) => void | — | Callback fired when collapsed state changes. |
| defaultCollapsed | boolean | collapsed | Initial default collapsed state. |
| width | string | w-60 | Custom width CSS string (e.g. "w-60", "w-72", "w-80"). Default "w-60". |
| resizable | boolean | false | Enable interactive drag resizability. Default false. |
| minWidth | number | 180 | Minimum width in pixels when resizable. Default 180. |
| maxWidth | number | 420 | Maximum width in pixels when resizable. Default 420. |
| children | ReactNode | — | Custom sidebar content. |
| className | string | — | Custom root class name. |
2. <SidebarTrigger> Toggle Button
Auto-wires click handler to toggle parent <Sidebar> collapse state, rendering PanelLeft or PanelRight icon matching side.
SidebarTrigger takes no props beyond className and the native element's attributes.
3. <SidebarHeader> Top Section
Header top bar wrapper for logo, title, and collapse triggers. Automatically centers content when collapsed.
SidebarHeader takes no props beyond className and the native element's attributes.
4. <SidebarBody> Scrollable Content
Scrollable main body container (`flex-1 overflow-y-auto pg-scroll`) holding sections and items.
SidebarBody takes no props beyond className and the native element's attributes.
5. <SidebarSection> Group Container
Logical section container with an optional uppercase title label. Automatically hides title when collapsed.
| Prop | Type | Default |
|---|---|---|
| title | string | — |
6. <SidebarNavItem> Navigation Rail Item
Specialized navigation item button/link that automatically reacts to collapse state (hides text label and renders a hover Tooltip when collapsed).
| Prop | Type | Default |
|---|---|---|
| icon | ReactNode | — |
| label* | string | — |
| active | boolean | — |
| badge | ReactNode | — |
| href | string | — |
| onClick | () => void | — |
| className | string | — |
* required
7. <SidebarFooter> Bottom Section
Footer container for user avatar, settings trigger, or profile info.
SidebarFooter takes no props beyond className and the native element's attributes.