sidebar-icon-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-icon-example",
  "title": "Sidebar (Icon)",
  "registryDependencies": [
    "avatar",
    "button",
    "collapsible",
    "dropdown-menu",
    "item",
    "sidebar",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-maia/examples/sidebar-icon-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}