SAV Design/App Sidebar

App Sidebar

Authenticated app-shell navigation: brand block, labelled nav groups with active state from usePathname, user menu with links and sign-out callback; icon rail on desktop, drawer on mobile. Brand, groups, user and callbacks are props.

App patternsregistry:component

Install

npx shadcn@latest add @sav/app-sidebar

Needs "@sav": "https://design.sasv.ch/r/{name}.json" under registries in components.json. Direct URL: /r/app-sidebar.json.

Preview

Operations
Finance
Inline for the preview (collapsible="none"). In an app the default "icon" mode collapses to a rail on desktop and a drawer on mobile — this gallery's own navigation is the same component.

Files

  • registry/sav/components/app-sidebar.tsx→ @components/app-sidebar.tsx

Dependencies

npm packages

lucide-react