Sidebar

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

<SidebarProvider defaultOpen collapsible="icon">
  <div className="flex">
    <Sidebar>
      <SidebarHeader>Acme Inc.</SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton active icon={<HomeIcon />} tooltip="Home">
                Home
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>...</SidebarFooter>
    </Sidebar>
    <main>
      <SidebarTrigger />
      {children}
    </main>
  </div>
</SidebarProvider>