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/radix-mira/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/radix-mira/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/radix-mira/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                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\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                            <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                          </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=\"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        <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"
}