Sidebar

Source: packages/shared/components/ui/sidebar.tsx

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarTrigger,
  useSidebar,
} from "@prosper/shared/components/ui/sidebar";

Preview

Navigation

Overview

The Sidebar component is the most complex shared component. It provides:

SidebarProvider — Context for open/close state, collapsible mode, mobile breakpoint
Sidebar — The sidebar itself (side="left" or side="right")
SidebarHeader / SidebarContent / SidebarFooter — Layout sections
SidebarGroup / SidebarGroupLabel / SidebarGroupContent — Labeled groups
SidebarMenu / SidebarMenuItem / SidebarMenuButton — Navigation items with tooltip support
SidebarMenuSub — Nested sub-menus
SidebarTrigger — Toggle button
useSidebar() — Hook for programmatic control

Collapsible Variants

Variant	Behavior
`offcanvas`	Fully collapses off-screen
`icon`	Collapses to icon-only rail (`--sidebar-width-icon: 3rem`)
`none`	Not collapsible

Default Dimensions

Token	Value
`--sidebar-width`	`16rem` (256px)
`--sidebar-width-icon`	`3rem` (48px)

Usage in the Codebase

The admin dashboard uses the Sidebar for its main navigation layout.

Notes

Override in Admin App.tsx: The sidebar is configured with collapsible="none" (not collapsible) and heavy className overrides:
- Sidebar: className="fixed inset-y-0 left-0 z-10 w-[160px] border-r border-sidebar-border h-svh" — fixed positioning and a narrower width than the default 16rem (256px).
- SidebarHeader: className="px-[8px] py-[8px] justify-center border-b border-[#bbd3ff]" — custom padding and a hardcoded blue border.
- SidebarGroup: className="px-[8px] py-[8px]" — tighter padding than defaults.
- SidebarMenu: className="gap-[4px]" — reduced gap between menu items.
Consider migrating the hardcoded border-[#bbd3ff] to a semantic token.