Composable shadcn-style parts: wrap the app in SidebarProvider, then assemble Sidebar from Header/Content/Footer, Groups with labels, and Menu rows. SidebarTrigger or useSidebar() collapses it off-canvas.
<SidebarProvider>
<Sidebar>
<SidebarHeader>{/* logo */}</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>Your Money</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton isActive>
<DashboardTilesIcon /> Dashboard
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton asChild>
<a href="/transactions">
<ArrowDoubleHorizontalIcon /> Transactions
</a>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>...</SidebarMenu>
</SidebarFooter>
</Sidebar>
<main>
<SidebarTrigger />
...
</main>
</SidebarProvider>