sidebar-inset-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar-inset-example",
  "title": "Sidebar (Inset)",
  "registryDependencies": [
    "collapsible",
    "sidebar",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-nova/examples/sidebar-inset-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\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      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\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=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open: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\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\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 render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\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"
}