Sidebar

App-shell navigation sidebar.

The application sidebar: grouped, icon-led navigation rendered as proper `<nav>` + `<ul>/<li>`. Items can link (`href`), carry a status dot and a square `badge`, and nest one level of children with the disclosure pattern. Collapses to an icon-only rail.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Sidebar } from 'dssoca';
  let active = $state('hub');
  let collapsed = $state(false);
</script>

<Sidebar
  {active}
  {collapsed}
  onSelect={(id) => (active = id)}
  onToggleCollapsed={(c) => (collapsed = c)}
/>

Exports the `SideItem`, `SideGroup`, and `SideStatus` types from `dssoca`. `SideItem` gains `href`, `badge`, optional `icon` (omit for a text-only item), and one level of nested `children`. The rail stretches to fill its host container’s height (`min-height: 100%`), so the border/background span the full screen or column; it still grows past the viewport when the nav is long.

Props

Prop	Type	Default	Description
`active`	`string`	`'hub'`	Active item id.
`groups`	`SideGroup[]`	—	Sections of items ({ id, label, icon?, status?, href?, badge?, children? }); has a built-in default.
`onSelect`	`(id: string) => void`	—	Selection handler.
`collapsed`	`boolean`	`false`	Collapse to an icon-only rail; labels/section text are hidden.
`onToggleCollapsed`	`(collapsed: boolean) => void`	—	Fired when the built-in collapse toggle is pressed.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.