sidebar/usage

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

useSidebar hook import and usage

Import useSidebar from @/components/ui/sidebar and destructure its properties: const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar } = useSidebar()

SidebarTrigger component purpose

The SidebarTrigger component renders a button that toggles the sidebar open or closed. It can be placed in the main content area to provide users with a way to toggle the sidebar.

SidebarHeader with workspace switcher example

This example shows how to create a workspace switcher in SidebarHeader using SidebarMenu, SidebarMenuItem with DropdownMenuTrigger, SidebarMenuButton displaying "Select Workspace" with a ChevronDown icon, and DropdownMenu with DropdownMenuItem options.

SidebarFooter with user menu example

This example shows how to create a user menu in SidebarFooter using SidebarMenu, SidebarMenuItem with SidebarMenuButton containing a User2 icon and "Username" text.

SidebarMenu basic example

This example shows how to build a SidebarMenu by mapping through projects and creating SidebarMenuItem for each project, containing a SidebarMenuButton with an href prop and displaying the project icon and name.

SidebarMenuSkeleton loading example

This example shows how to create a loading skeleton for a SidebarMenu by mapping through an array of 5 items and rendering SidebarMenuItem with SidebarMenuSkeleton for each.

Making SidebarGroup collapsible

To make a SidebarGroup collapsible, wrap it with a Collapsible component and use CollapsibleTrigger for the SidebarGroupLabel. Example: `<Collapsible defaultOpen className="group/collapsible"><SidebarGroup><SidebarGroupLabel asChild><CollapsibleTrigger>Help<ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" /></CollapsibleTrigger></SidebarGroupLabel><CollapsibleContent><SidebarGroupContent /></CollapsibleContent></SidebarGroup></Collapsible>`

SidebarHeader example usage

The SidebarHeader component is sticky at the top and used for branding, titles, or workspace switchers. Example: `<SidebarHeader><SidebarMenu><SidebarMenuItem><DropdownMenu><DropdownMenuTrigger asChild><SidebarMenuButton>Select Workspace<ChevronDown className="ml-auto" /></SidebarMenuButton></DropdownMenuTrigger><DropdownMenuContent className="w-[--radix-popper-anchor-width]"><DropdownMenuItem><span>Acme Inc</span></DropdownMenuItem></DropdownMenuContent></DropdownMenu></SidebarMenuItem></SidebarMenu></SidebarHeader>`

SidebarFooter example usage

The SidebarFooter component is sticky at the bottom and used for user menus, settings, or actions. Example: `<SidebarFooter><SidebarMenu><SidebarMenuItem><SidebarMenuButton><User2 /> Username</SidebarMenuButton></SidebarMenuItem></SidebarMenu></SidebarFooter>`

SidebarMenuSkeleton for loading state

The SidebarMenuSkeleton component renders a skeleton for a SidebarMenu. Example: `<SidebarMenu>{Array.from({ length: 5 }).map((_, index) => (<SidebarMenuItem key={index}><SidebarMenuSkeleton /></SidebarMenuItem>))}</SidebarMenu>`

Sidebar Layout example

Complete sidebar layout example in app/layout.tsx: `import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { AppSidebar } from "@/components/app-sidebar"; export default function Layout({ children }: { children: React.ReactNode }) { return (<SidebarProvider><AppSidebar /><main><SidebarTrigger />{children}</main></SidebarProvider>); }`

AppSidebar component example

Example AppSidebar component in components/app-sidebar.tsx: `import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader } from "@/components/ui/sidebar"; export function AppSidebar() { return (<Sidebar><SidebarHeader /><SidebarContent><SidebarGroup /><SidebarGroup /></SidebarContent><SidebarFooter /></Sidebar>); }`

SidebarMenu example with array mapping

Example SidebarMenu for rendering menu items from an array: `<SidebarMenu>{projects.map((project) => (<SidebarMenuItem key={project.name}><SidebarMenuButton asChild><a href={project.url}><project.icon /><span>{project.name}</span></a></SidebarMenuButton></SidebarMenuItem>))}</SidebarMenu>`

Styling sidebar based on collapsible state

To hide elements when sidebar is collapsed to icons, use: `<SidebarGroup className="group-data-[collapsible=icon]:hidden" />`. To style menu actions based on active state, use: `<SidebarMenuAction className="peer-data-[active=true]/menu-button:opacity-100" />`

Sidebar keyboard shortcut configuration

The default keyboard shortcut to trigger the sidebar is cmd+b on Mac and ctrl+b on Windows. The shortcut is configured with SIDEBAR_KEYBOARD_SHORTCUT = 'b' constant in sidebar.tsx.

useSidebar hook API

The useSidebar hook returns an object with the following properties: state ('expanded' or 'collapsed', the current state of the sidebar), open (boolean, whether the sidebar is open), setOpen ((open: boolean) => void, sets the open state of the sidebar), openMobile (boolean, whether the sidebar is open on mobile), setOpenMobile ((open: boolean) => void, sets the open state of the sidebar on mobile), isMobile (boolean, whether the sidebar is on mobile), toggleSidebar (() => void, toggles the sidebar on desktop and mobile).

Controlled sidebar with open and onOpenChange

To control the sidebar state externally, use the open and onOpenChange props on SidebarProvider. Example: <SidebarProvider open={open} onOpenChange={setOpen}><Sidebar /></SidebarProvider>

Sidebar usage layout example

Basic layout structure: wrap SidebarProvider around AppSidebar component and main content area. In app/layout.tsx, use SidebarProvider with AppSidebar component and SidebarTrigger inside main element. In AppSidebar component, structure Sidebar with SidebarHeader, SidebarContent (containing SidebarGroup components), and SidebarFooter.

SidebarInset wrapper for inset variant

When using the 'inset' variant of Sidebar, wrap main content in SidebarInset component: <SidebarProvider><Sidebar variant='inset' /><SidebarInset><main>{children}</main></SidebarInset></SidebarProvider>

Sidebar styling with data attributes

Style sidebar based on state using data attributes: use group-data-[collapsible=icon]:hidden to hide elements when collapsed to icons, use peer-data-[active=true]/menu-button:opacity-100 to show menu actions on active items.

Give your agent this brain