ISidebar ​

The app's primary navigation column — sections, collapsible groups, badges, and a collapse-to-icons mode. It works with or without IAppShell; it is a column, and it needs a height.

<script setup lang="ts">
import { DashboardSquare01Icon, Invoice01Icon, UserGroupIcon } from '@hugeicons/core-free-icons'

const items = [
  { label: 'Overview', href: '/', icon: DashboardSquare01Icon, active: true },
  { label: 'Invoices', href: '/invoices', icon: Invoice01Icon, badge: 12 },
  { label: 'Clients', href: '/clients', icon: UserGroupIcon },
]
</script>

<template>
  <ISidebar :items="items" class="w-60" />
</template>

A link with href renders an <a>. Omit it and you get a <button> instead, so onSelect can hand navigation to your router without a full page load.

Sections ​

An entry with a section key is a labelled run of links under a small heading. A collapsible group carries items under a label instead, which is what tells the two apart.

const items = [
  {
    section: 'Billing',
    items: [
      { label: 'Invoices', href: '/invoices', icon: Invoice01Icon, badge: 12 },
      { label: 'Estimates', href: '/estimates', icon: File01Icon },
    ],
  },
  {
    section: 'Records',
    items: [{ label: 'Clients', href: '/clients', icon: UserGroupIcon }],
  },
]

Links written before or between sections keep their position.

Collapsible groups ​

A link with its own items becomes a group that opens and closes in place. defaultOpen starts it open.

const items = [
  { label: 'Overview', href: '/', icon: DashboardSquare01Icon },
  {
    label: 'Billing',
    icon: Invoice01Icon,
    defaultOpen: true,
    items: [
      { label: 'Invoices', href: '/invoices' },
      { label: 'Estimates', href: '/estimates' },
    ],
  },
]

The panel animates its height, so the rows below slide rather than jump. Inside the group, the rule sits on the centre of the parent's icon and each child's label lines up with the parent's.

Collapse to icons ​

v-model:collapsed narrows the column to its icons. The labels are removed rather than visually hidden, and every link carries an aria-label in their place.

<script setup lang="ts">
const collapsed = ref(false)
</script>

<template>
  <ISidebar v-model:collapsed="collapsed" :items="items" />
  <IButton @click="collapsed = !collapsed">
    Toggle
  </IButton>
</template>

Badges and section headings fold away with the labels; the group chevron goes too, since there is no room to show what it would open.

Header and footer ​

Both slots stay pinned, with the link list as the only scrolling region. Each receives collapsed, so a wordmark can become a monogram.

<ISidebar :items="items">
  <template #header="{ collapsed }">
    <Logo />
    <span v-if="!collapsed">Northwind</span>
  </template>

  <template #footer="{ collapsed }">
    <AccountRow :compact="collapsed" />
  </template>
</ISidebar>

A right-hand sidebar ​

side decides which edge carries the border. Pair it with IAppShell's sidebar-position to move the column itself.

<IAppShell sidebar-position="right">
  <template #sidebar><ISidebar :items="items" side="right" /></template>
</IAppShell>

Collapsed, in full ​

<ISidebar :collapsed="true" :items="items" />

Props ​

v-model:collapsed is a boolean model, defaulting to false.

Slots ​

Item shapes ​

interface SidebarLink {
  label: string
  href?: string
  icon?: IconLike
  badge?: string | number
  disabled?: boolean
  active?: boolean
  onSelect?: () => void
  items?: SidebarLink[]
  defaultOpen?: boolean
}

interface SidebarSection {
  section: string
  items: SidebarLink[]
}

active is reflected as both data-active and aria-current, so a router integration only has to compute a boolean.