AppSidebar() — ui Function Reference

Architecture documentation for the AppSidebar() function in sidebar-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ AppSidebar() — ui Function Reference

Dependency Diagram

graph TD
  830b3c15_8a14_ad80_a9f8_b7a5cb26c1c7["AppSidebar()"]
  b65e550a_5b9a_6eb5_6176_2c175ffe8249["sidebar-demo.tsx"]
  830b3c15_8a14_ad80_a9f8_b7a5cb26c1c7 -->|defined in| b65e550a_5b9a_6eb5_6176_2c175ffe8249
  style 830b3c15_8a14_ad80_a9f8_b7a5cb26c1c7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/sidebar-demo.tsx lines 480–507

export default function AppSidebar({
  ...props
}: React.ComponentProps<typeof Sidebar>) {
  return (
    <SidebarProvider>
      <Sidebar collapsible="icon" {...props}>
        <SidebarHeader>
          <TeamSwitcher teams={data.teams} />
        </SidebarHeader>
        <SidebarContent>
          <NavMain items={data.navMain} />
          <NavProjects projects={data.projects} />
        </SidebarContent>
        <SidebarFooter>
          <NavUser user={data.user} />
        </SidebarFooter>
        <SidebarRail />
      </Sidebar>
      <SidebarInset>
        <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
          <div className="flex items-center gap-2 px-4">
            <SidebarTrigger className="-ml-1" />
          </div>
        </header>
      </SidebarInset>
    </SidebarProvider>
  )
}