DashboardSidebar

Usage

<SDashboardSidebar :default-size="260" :min-size="200" :max-size="400">
  <template #header="{ isCollapsed }">
    {{ isCollapsed ? 'A' : 'Acme Inc' }}
  </template>
  <template #default="{ isCollapsed }">
    <nav>
      <a href="/">
        <Icon name="..." />
        <span v-if="!isCollapsed">Dashboard</span>
      </a>
    </nav>
  </template>
  <template #footer>...</template>
</SDashboardSidebar>

Must be a direct child of DashboardGroup - see its own page for the resize/collapse/persistence/mobile-drawer behavior, all shared across the whole shell rather than owned by the sidebar alone. header/default/footer mirror PageAside's own slot shape - default content scrolls (via ScrollArea) independently of the fixed header/footer.

On desktop, a themed SplitterPanel (collapsible, minSize/maxSize/defaultSize passed straight through); below mobileBreakpoint, the same content renders inside a Drawer instead. Sizes are pixels by default (sizeUnit="px") rather than SplitterPanel's own percentage default - a sidebar's width reads more naturally in pixels than as a fraction of however wide the page happens to be.

Control collapse from outside

Bind v-model:collapsed to set the desktop rail state and receive updates from resizing or DashboardSidebarToggle. An explicit value takes precedence over saved collapse state. Omit it to keep the existing uncontrolled sizing and persistence.

<SDashboardSidebar v-model:collapsed="collapsed" />

A component ref also exposes collapse(), expand(), toggle(), and isCollapsed. collapse() and expand() operate on the desktop panel and restore its previous expanded width. They do nothing on mobile or when collapsible is false. toggle() retains the normal mobile drawer behavior. The collapsed model does not control the mobile drawer; its value is applied when returning to desktop. Use the model to capture the user's current choice before temporarily collapsing for a page, then restore that choice when leaving.

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot - here's DashboardSidebar's own theme file:

Props

Slots

isCollapsed is always false on mobile, where there's no in-between state - just the drawer open or closed. Use it to swap a header's logo to a narrower mark, or hide a nav item's label text, once the sidebar collapses to its icon rail - the live example above does both, along with hiding the footer's name next to the avatar.

Events