AppSidebar() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ AppSidebar() — ui Function Reference

Dependency Diagram

graph TD
  0436cb01_5fa7_a3d1_94b2_4b11c06d2568["AppSidebar()"]
  3bf36ea4_8b3d_f700_f1b1_62582a7bd1df["sidebar-menu.tsx"]
  0436cb01_5fa7_a3d1_94b2_4b11c06d2568 -->|defined in| 3bf36ea4_8b3d_f700_f1b1_62582a7bd1df
  style 0436cb01_5fa7_a3d1_94b2_4b11c06d2568 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/sidebar-menu.tsx lines 50–74

export default function AppSidebar() {
  return (
    <SidebarProvider>
      <Sidebar>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Projects</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                {projects.map((project) => (
                  <SidebarMenuItem key={project.name}>
                    <SidebarMenuButton render={<a href={project.url} />}>
                      <project.icon />
                      <span>{project.name}</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                ))}
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
    </SidebarProvider>
  )
}