AppSidebar() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ AppSidebar() — ui Function Reference

Dependency Diagram

graph TD
  0d4c7097_19f3_bdf5_a433_8eb8d1eb51d1["AppSidebar()"]
  f589898d_1173_bd72_2f54_9ab540b591d3["app-sidebar.tsx"]
  0d4c7097_19f3_bdf5_a433_8eb8d1eb51d1 -->|defined in| f589898d_1173_bd72_2f54_9ab540b591d3
  style 0d4c7097_19f3_bdf5_a433_8eb8d1eb51d1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/app-sidebar.tsx lines 171–297

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const pathname = usePathname()
  return (
    <Sidebar side="left" collapsible="icon" {...props}>
      <SidebarHeader>
        <TeamSwitcher teams={data.teams} />
        <SidebarGroup className="py-0 group-data-[collapsible=icon]:hidden">
          <SidebarGroupContent>
            <form className="relative">
              <Label htmlFor="search" className="sr-only">
                Search
              </Label>
              <InputGroup className="bg-background h-8 shadow-none">
                <InputGroupInput
                  id="search"
                  placeholder="Search the docs..."
                  className="h-7"
                  data-slot="input-group-control"
                />
                <InputGroupAddon>
                  <SearchIcon className="text-muted-foreground" />
                </InputGroupAddon>
              </InputGroup>
            </form>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>
          <SidebarMenu>
            {data.navMain.map((item) => (
              <Collapsible
                key={item.title}
                asChild
                defaultOpen={item.isActive}
                className="group/collapsible"
              >
                <SidebarMenuItem>
                  <CollapsibleTrigger asChild>
                    <SidebarMenuButton tooltip={item.title}>
                      {item.icon && <item.icon />}
                      <span>{item.title}</span>
                      <ChevronRightIcon className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
                    </SidebarMenuButton>
                  </CollapsibleTrigger>
                  <CollapsibleContent>
                    <SidebarMenuSub>
                      {item.items?.map((subItem) => (
                        <SidebarMenuSubItem key={subItem.title}>
                          <SidebarMenuSubButton asChild>
                            <a href={subItem.url}>
                              <span>{subItem.title}</span>
                            </a>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  </CollapsibleContent>
                </SidebarMenuItem>
              </Collapsible>
            ))}
          </SidebarMenu>
        </SidebarGroup>
        <SidebarGroup className="group-data-[collapsible=icon]:hidden">
          <SidebarMenu>
            {["registry:ui", "registry:page", "registry:block"].map((type) => {
              const typeComponents = Object.entries(componentRegistry).filter(
                ([, item]) => item.type === type
              )
              if (typeComponents.length === 0) {
                return null
              }

              return (
                <Collapsible
                  key={type}
                  asChild
                  defaultOpen={pathname.includes("/sink/")}
                  className="group/collapsible"
                >