sidebar-08.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-08",
  "title": "Sidebar 08",
  "description": "An inset sidebar with secondary navigation.",
  "registryDependencies": [
    "sidebar",
    "breadcrumb",
    "separator",
    "collapsible",
    "dropdown-menu",
    "avatar"
  ],
  "files": [
    {
      "path": "registry/base-mira/blocks/sidebar-08/page.tsx",
      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\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-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/dashboard/page.tsx"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-08/components/app-sidebar.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\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=\"BookOpenIcon\"\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  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\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}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-08/components/nav-main.tsx",
      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n    isActive?: boolean\n    items?: {\n      title: string\n      url: string\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Platform</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <Collapsible\n            key={item.title}\n            defaultOpen={item.isActive}\n            render={<SidebarMenuItem />}\n          >\n            <SidebarMenuButton\n              tooltip={item.title}\n              render={<a href={item.url} />}\n            >\n              {item.icon}\n              <span>{item.title}</span>\n            </SidebarMenuButton>\n            {item.items?.length ? (\n              <>\n                <CollapsibleTrigger\n                  render={\n                    <SidebarMenuAction className=\"aria-expanded:rotate-90\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                  <span className=\"sr-only\">Toggle</span>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {item.items?.map((subItem) => (\n                      <SidebarMenuSubItem key={subItem.title}>\n                        <SidebarMenuSubButton render={<a href={subItem.url} />}>\n                          <span>{subItem.title}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </>\n            ) : null}\n          </Collapsible>\n        ))}\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-08/components/nav-projects.tsx",
      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavProjects({\n  projects,\n}: {\n  projects: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Projects</SidebarGroupLabel>\n      <SidebarMenu>\n        {projects.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton render={<a href={item.url} />}>\n              {item.icon}\n              <span>{item.name}</span>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <SidebarMenuAction\n                    showOnHover\n                    className=\"aria-expanded:bg-muted\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeOutlineIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-48\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>View Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare2\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Share Project</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                  <span>Delete Project</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton>\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-08/components/nav-secondary.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport function NavSecondary({\n  items,\n  ...props\n}: {\n  items: {\n    title: string\n    url: string\n    icon: React.ReactNode\n  }[]\n} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {\n  return (\n    <SidebarGroup {...props}>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton size=\"sm\" render={<a href={item.url} />}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/base-mira/blocks/sidebar-08/components/nav-user.tsx",
      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar>\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback>CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs\">{user.email}</span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "sidebar",
    "dashboard"
  ],
  "type": "registry:block"
}