Sidebar

Installation

import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarGroupContent,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@aspyn-io/kit";

Sidebar

A full navigation shell: composable groups, menus, and active states, backed by SidebarProvider (keyboard toggle ⌘/Ctrl+B, cookie-persisted state, mobile Sheet).

Sub-menus, badges & actions

Nest SidebarMenuSub for sub-items, SidebarMenuBadge for counts, and SidebarMenuAction for a hover action on a row.

Notes

• Wrap your app in SidebarProvider and put page content in SidebarInset. Sidebar supports side (left/right), variant (sidebar/floating/inset), and collapsible (offcanvas/icon/none).
• SidebarTrigger toggles it; ⌘/Ctrl+B is wired by default and the open state persists via cookie. On mobile it becomes a Sheet automatically.
• Colors come from a dedicated --as-sidebar-* token set (bg-sidebar, sidebar-accent, sidebar-border…), so the chrome themes independently of the main surface.