"use client"; import { BarChart3, Bell, ChevronsUpDown, FolderOpen, Home, PanelLeftClose, PanelLeftOpen, Settings, Users, } from "lucide-react"; import { useState } from "react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarSeparator, useSidebar, } from "@/components/ui/sidebar"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; const navItems = [ { label: "Dashboard", icon: Home, badge: null }, { label: "Projects", icon: FolderOpen, badge: null }, { label: "Analytics", icon: BarChart3, badge: null }, { label: "Team", icon: Users, badge: null }, { label: "Notifications", icon: Bell, badge: "3" }, { label: "Settings", icon: Settings, badge: null }, ]; function SidebarDemoContent() { const [active, setActive] = useState("Dashboard"); const { state, toggleSidebar } = useSidebar(); const expanded = state === "expanded"; return ( <>

Bonsai App

Toggle Sidebar

Platform {navItems.slice(0, 4).map((item) => ( setActive(item.label)} > {item.label} {item.badge && ( {item.badge} )} ))} Account {navItems.slice(4).map((item) => ( setActive(item.label)} > {item.label} {item.badge && ( {item.badge} )} ))}

{active}

Try collapsing the sidebar with the toggle button or press Cmd+B. Resize your browser to see the mobile sheet behavior.

{Array.from({ length: 6 }).map((_, i) => (

))}

); } export function SidebarDemo() { return ( ); }