AppSidebar() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ AppSidebar() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/examples/radix/sidebar-rtl.tsx lines 212–284

function AppSidebar() {
  const { dir, t } = useTranslation(translations, "ar")

  const navMain = [
    {
      title: t.playground,
      url: "#",
      icon: SquareTerminal,
      isActive: true,
      items: [
        { title: t.history, url: "#" },
        { title: t.starred, url: "#" },
        { title: t.settings, url: "#" },
      ],
    },
    {
      title: t.models,
      url: "#",
      icon: Bot,
      items: [
        { title: t.genesis, url: "#" },
        { title: t.explorer, url: "#" },
        { title: t.quantum, url: "#" },
      ],
    },
    {
      title: t.documentation,
      url: "#",
      icon: BookOpen,
      items: [
        { title: t.introduction, url: "#" },
        { title: t.getStarted, url: "#" },
        { title: t.tutorials, url: "#" },
        { title: t.changelog, url: "#" },
      ],
    },
    {
      title: t.settings,
      url: "#",
      icon: Settings2,
      items: [
        { title: t.general, url: "#" },
        { title: t.team, url: "#" },
        { title: t.billing, url: "#" },
        { title: t.limits, url: "#" },
      ],
    },
  ]

  const projects = [
    { name: t.designEngineering, url: "#", icon: Frame },
    { name: t.salesMarketing, url: "#", icon: PieChart },
    { name: t.travel, url: "#", icon: Map },
  ]

  const user = {
    name: "shadcn",
    email: "m@example.com",
    avatar: "/avatars/shadcn.jpg",
  }

  return (
    <SidebarProvider>
      <SidebarContentInner
        dir={dir}
        t={t}
        navMain={navMain}
        projects={projects}
        user={user}
      />
    </SidebarProvider>
  )
}