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
  116a35f0_9ba2_a82c_8d19_4954bf785bbb["AppSidebar()"]
  7b18d22b_f3e1_9e13_72d5_5968e96b55f3["sidebar-rtl.tsx"]
  116a35f0_9ba2_a82c_8d19_4954bf785bbb -->|defined in| 7b18d22b_f3e1_9e13_72d5_5968e96b55f3
  style 116a35f0_9ba2_a82c_8d19_4954bf785bbb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/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>
  )
}