sidebar-13.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-13",
  "title": "Sidebar 13",
  "description": "A sidebar in a dialog.",
  "registryDependencies": [
    "sidebar",
    "breadcrumb",
    "button",
    "dialog"
  ],
  "files": [
    {
      "path": "registry/base-lyra/blocks/sidebar-13/page.tsx",
      "content": "import { SettingsDialog } from \"@/registry/base-lyra/blocks/sidebar-13/components/settings-dialog\"\n\nexport default function Page() {\n  return (\n    <div className=\"flex h-svh items-center justify-center\">\n      <SettingsDialog />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/dashboard/page.tsx"
    },
    {
      "path": "registry/base-lyra/blocks/sidebar-13/components/settings-dialog.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 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                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "sidebar",
    "dashboard"
  ],
  "type": "registry:block"
}