Copy page

Components

AppSidebar

src/lib/components/AppSidebar.svelte

Purpose

The left navigation rail for the authenticated shell. It renders the SidebarOrgSwitcher in the header, the SidebarModuleSwitcher plus the current module's nav links in the content, and the SidebarProfileMenu, SidebarHealthBadge, and SidebarVersionBadge in the footer. Nav links are driven by shellNav.moduleNav and support two-level collapsible groups with active-route highlighting. On afterNavigate it persists the last route, and an $effect keeps the selected module in sync with the current pathname.

Origin

Custom — Primebrick-written, built on the shadcn-svelte™ Sidebar primitive and composing five custom Sidebar* subcomponents plus DynamicIcon.

Usage

Default (mounted by AppShell)

Code
<Sidebar.Provider class="flex h-full min-h-0 w-full flex-1 flex-row">
  <AppSidebar />
  <Sidebar.Inset class="min-h-0 flex-1">{@render children()}</Sidebar.Inset>
</Sidebar.Provider>

Collapsible icon mode

The sidebar uses collapsible="icon". When collapsed, group parents expand the rail on click instead of toggling, and labels hide via group-data-[collapsible=icon] utilities.

Code
<Sidebar.Root side="left" variant="sidebar" collapsible="icon">
  <!-- header / content / footer as in AppSidebar -->
</Sidebar.Root>

Logout handling

AppSidebar owns the logout flow (clears tokens, session storage, redirects to /login) and passes it down as onLogout to SidebarProfileMenu.

Code
<SidebarProfileMenu {user} {collapsed} onLogout={handleLogout} />

Props

Full prop table: see API reference — appsidebar.

Key props: none — AppSidebar takes no props; it reads state from shellNav, userProfileState, and the Sidebar.useSidebar() context.

Next steps

• Component catalog
• UI stack
• API reference