SidebarContentInner() — ui Function Reference

Architecture documentation for the SidebarContentInner() function in sidebar-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ SidebarContentInner() — ui Function Reference

Dependency Diagram

graph TD
  aa729e08_42ff_34ed_7001_6beb5a73d65f["SidebarContentInner()"]
  6f2384b3_f383_58b7_5cc4_56028896315d["sidebar-rtl.tsx"]
  aa729e08_42ff_34ed_7001_6beb5a73d65f -->|defined in| 6f2384b3_f383_58b7_5cc4_56028896315d
  style aa729e08_42ff_34ed_7001_6beb5a73d65f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/sidebar-rtl.tsx lines 286–521

function SidebarContentInner({
  dir,
  t,
  navMain,
  projects,
  user,
}: {
  dir: "ltr" | "rtl"
  t: typeof translations.ar.values
  navMain: Array<{
    title: string
    url: string
    icon?: React.ElementType
    isActive?: boolean
    items?: Array<{ title: string; url: string }>
  }>
  projects: Array<{
    name: string
    url: string
    icon: React.ElementType
  }>
  user: {
    name: string
    email: string
    avatar: string
  }
}) {
  const { isMobile } = useSidebar()

  return (
    <>
      <Sidebar
        collapsible="icon"
        dir={dir}
        side={dir === "ltr" ? "left" : "right"}
      >
        <SidebarHeader>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg" asChild>
                <a href="#">
                  <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
                    <GalleryVerticalEnd className="size-4" />
                  </div>
                  <div className="flex flex-col gap-0.5 leading-none">
                    <span className="font-medium">{t.teamName}</span>
                    <span className="">{t.teamPlan}</span>
                  </div>
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>{t.platform}</SidebarGroupLabel>
            <SidebarMenu>
              {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>
                        <ChevronRight className="ms-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 rtl:rotate-180 rtl: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>