Sidebar

App-shell navigation sidebar.

The application sidebar: grouped, icon-led navigation items with optional status dots.

Demo

Demo loads from http://localhost:6006. Run pnpm storybook for it to render locally.

svelte

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

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

Prop	Type	Default	Description
`active`	`string`	`'hub'`	Active item id.
`groups`	`SideGroup[]`	—	Sections of { id, label, icon, status } items.
`onSelect`	`(id: string) => void`	—	Selection handler.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.