v0-sidebar-16.json — ui Source File

Source Code

{
  "name": "v0-sidebar-16",
  "type": "registry:block",
  "description": "An inset sidebar with site header navigation.",
  "registryDependencies": [
    "sidebar",
    "breadcrumb",
    "separator",
    "collapsible",
    "dropdown-menu",
    "avatar",
    "navigation-menu",
    "button"
  ],
  "files": [
    {
      "path": "v0/sidebar-16.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport {\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Frame,\n  LifeBuoy,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Send,\n  Settings2,\n  Share,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Icons } from \"@/components/icons\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/components/ui/breadcrumb\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarTrigger,\n  useSidebar,\n} from \"@/components/ui/sidebar\"\nconst HEADER_HEIGHT = \"4rem\"\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: SquareTerminal,\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: Bot,\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: BookOpen,\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: Settings2,\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: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function Page() {\n  const [open, setOpen] = React.useState(true)\n  const { isMobile } = useSidebar()\n\n  return (\n    <div\n      style={\n        {\n          \"--header-height\": HEADER_HEIGHT,\n        } as React.CSSProperties\n      }\n    >\n      <header className=\"sticky top-0 bg-sidebar flex h-[--header-height] shrink-0 items-center gap-2 border-b px-4 isolate z-20\">\n        <div className=\"flex items-center gap-2 w-full\">\n          <Button\n            className=\"hidden md:flex\"\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => setOpen(!open)}\n          >\n            <Sidebar />\n          </Button>\n\n          <div className=\"mx-auto flex items-center gap-2\">\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <Command className=\"size-4\" />\n            </div>\n            <Separator orientation=\"vertical\" className=\"ml-4 h-4\" />\n            <NavigationMenu>\n              <NavigationMenuList>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Getting started\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n                      <li className=\"row-span-3\">\n                        <NavigationMenuLink asChild>\n                          <a\n                            className=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                            href=\"/\"\n                          >\n                            <Icons.logo className=\"h-6 w-6\" />\n                            <div className=\"mb-2 mt-4 text-lg font-medium\">\n                              shadcn/ui\n                            </div>\n                            <p className=\"text-sm leading-tight text-muted-foreground\">\n                              Beautifully designed components built with Radix\n                              UI and Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Introduction\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Re-usable components built using Radix UI and\n                              Tailwind CSS.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Installation\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              How to install dependencies and structure your\n                              app.\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n\n                      <li>\n                        <NavigationMenuLink asChild>\n                          <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                            <div className=\"text-sm font-medium leading-none\">\n                              Typography\n                            </div>\n                            <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                              Styles for headings, paragraphs, lists...etc\n                            </p>\n                          </a>\n                        </NavigationMenuLink>\n                      </li>\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <NavigationMenuTrigger className=\"bg-sidebar\">\n                    Components\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n                      {components.map((component) => (\n                        <li>\n                          <NavigationMenuLink key={component.title} asChild>\n                            <a className=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\">\n                              <div className=\"text-sm font-medium leading-none\">\n                                {component.title}\n                              </div>\n                              <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                                {component.description}\n                              </p>\n                            </a>\n                          </NavigationMenuLink>\n                        </li>\n                      ))}\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n                <NavigationMenuItem>\n                  <Link href=\"/docs\" legacyBehavior passHref>\n                    <NavigationMenuLink\n                      className={cn(navigationMenuTriggerStyle(), \"bg-sidebar\")}\n                    >\n                      Documentation\n                    </NavigationMenuLink>\n                  </Link>\n                </NavigationMenuItem>\n              </NavigationMenuList>\n            </NavigationMenu>\n          </div>\n        </div>\n      </header>\n      <SidebarProvider open={open} onOpenChange={setOpen}>\n        <Sidebar\n          className=\"top-[--header-height] pb-[--header-height]\"\n          variant=\"inset\"\n        >\n          <SidebarHeader>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <SidebarMenuButton size=\"lg\" asChild>\n                  <a href=\"#\">\n                    <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                      <Command className=\"size-4\" />\n                    </div>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-semibold\">Acme Inc</span>\n                      <span className=\"truncate text-xs\">Enterprise</span>\n                    </div>\n                  </a>\n                </SidebarMenuButton>\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                  >\n                    <SidebarMenuItem>\n                      <SidebarMenuButton asChild tooltip={item.title}>\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                      {item.items?.length ? (\n                        <>\n                          <CollapsibleTrigger asChild>\n                            <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                              <ChevronRight />\n                              <span className=\"sr-only\">Toggle</span>\n                            </SidebarMenuAction>\n                          </CollapsibleTrigger>\n                          <CollapsibleContent>\n                            <SidebarMenuSub>\n                              {item.items?.map((subItem) => (\n                                <SidebarMenuSubItem key={subItem.title}>\n                                  <SidebarMenuSubButton asChild>\n                                    <a href={subItem.url}>\n                                      <span>{subItem.title}</span>\n                                    </a>\n                                  </SidebarMenuSubButton>\n                                </SidebarMenuSubItem>\n                              ))}\n                            </SidebarMenuSub>\n                          </CollapsibleContent>\n                        </>\n                      ) : null}\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                        <span>{item.name}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <SidebarMenuAction showOnHover>\n                          <MoreHorizontal />\n                          <span className=\"sr-only\">More</span>\n                        </SidebarMenuAction>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent\n                        className=\"w-48\"\n                        side={isMobile ? \"bottom\" : \"right\"}\n                        align={isMobile ? \"end\" : \"start\"}\n                      >\n                        <DropdownMenuItem>\n                          <Folder className=\"text-muted-foreground\" />\n                          <span>View Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <Share className=\"text-muted-foreground\" />\n                          <span>Share Project</span>\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>\n                          <Trash2 className=\"text-muted-foreground\" />\n                          <span>Delete Project</span>\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </SidebarMenuItem>\n                ))}\n                <SidebarMenuItem>\n                  <SidebarMenuButton>\n                    <MoreHorizontal />\n                    <span>More</span>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroup>\n            <SidebarGroup className=\"mt-auto\">\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {data.navSecondary.map((item) => (\n                    <SidebarMenuItem key={item.title}>\n                      <SidebarMenuButton asChild size=\"sm\">\n                        <a href={item.url}>\n                          <item.icon />\n                          <span>{item.title}</span>\n                        </a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </SidebarContent>\n          <SidebarFooter>\n            <SidebarMenu>\n              <SidebarMenuItem>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                    >\n                      <Avatar className=\"h-8 w-8 rounded-lg\">\n                        <AvatarImage\n                          src={data.user.avatar}\n                          alt={data.user.name}\n                        />\n                        <AvatarFallback className=\"rounded-lg\">\n                          CN\n                        </AvatarFallback>\n                      </Avatar>\n                      <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                        <span className=\"truncate font-semibold\">\n                          {data.user.name}\n                        </span>\n                        <span className=\"truncate text-xs\">\n                          {data.user.email}\n                        </span>\n                      </div>\n                      <ChevronsUpDown className=\"ml-auto size-4\" />\n                    </SidebarMenuButton>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent\n                    className=\"w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                    side={isMobile ? \"bottom\" : \"right\"}\n                    align=\"end\"\n                    sideOffset={4}\n                  >\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 className=\"h-8 w-8 rounded-lg\">\n                          <AvatarImage\n                            src={data.user.avatar}\n                            alt={data.user.name}\n                          />\n                          <AvatarFallback className=\"rounded-lg\">\n                            CN\n                          </AvatarFallback>\n                        </Avatar>\n                        <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                          <span className=\"truncate font-semibold\">\n                            {data.user.name}\n                          </span>\n                          <span className=\"truncate text-xs\">\n                            {data.user.email}\n                          </span>\n                        </div>\n                      </div>\n                    </DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <Sparkles />\n                        Upgrade to Pro\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>\n                        <BadgeCheck />\n                        Account\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <CreditCard />\n                        Billing\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <Bell />\n                        Notifications\n                      </DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <LogOut />\n                      Log out\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarFooter>\n        </Sidebar>\n\n        <SidebarInset>\n          <header className=\" flex shrink-0 items-center gap-2 border-b py-2\">\n            <div className=\"flex items-center gap-2 px-4 py-2\">\n              <div className=\"flex md:hidden items-center gap-2\">\n                <SidebarTrigger />\n                <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n              </div>\n              <Breadcrumb>\n                <BreadcrumbList>\n                  <BreadcrumbItem className=\"hidden md:block\">\n                    <BreadcrumbLink href=\"#\">\n                      Building 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\">\n            <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            </div>\n            <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n          </div>\n        </SidebarInset>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/sidebar-16.tsx"
    }
  ]
}