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
  5f47eb46_3eb7_6f4a_01f5_d0440e73b7a2["AppSidebar()"]
  880ba83f_f29c_5fcf_b327_acb181f57fda["sidebar-demo.tsx"]
  5f47eb46_3eb7_6f4a_01f5_d0440e73b7a2 -->|defined in| 880ba83f_f29c_5fcf_b327_acb181f57fda
  style 5f47eb46_3eb7_6f4a_01f5_d0440e73b7a2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/sidebar-demo.tsx lines 477–504

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>
  )
}