Sidebar (Inset)

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Collapsible,
7  CollapsibleContent,
8  CollapsibleTrigger,
9} from "@/registry/bases/radix/ui/collapsible"
10import {
11  Sidebar,
12  SidebarContent,
13  SidebarGroup,
14  SidebarGroupContent,
15  SidebarGroupLabel,
16  SidebarInset,
17  SidebarMenu,
18  SidebarMenuAction,
19  SidebarMenuButton,
20  SidebarMenuItem,
21  SidebarMenuSub,
22  SidebarMenuSubButton,
23  SidebarMenuSubItem,
24  SidebarProvider,
25  SidebarRail,
26  SidebarTrigger,
27} from "@/registry/bases/radix/ui/sidebar"
28import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
29 
30export default function SidebarInsetExample() {
31  const data = {
32    navMain: [
33      {
34        title: "Dashboard",
35        url: "#",
36        icon: (
37          <IconPlaceholder
38            lucide="HomeIcon"
39            tabler="IconHome"
40            hugeicons="Home01Icon"
41            phosphor="HouseIcon"
42          />
43        ),
44        isActive: true,
45        items: [
46          {
47            title: "Overview",
48            url: "#",
49          },
50          {
51            title: "Analytics",
52            url: "#",
53          },
54        ],
55      },
56      {
57        title: "Analytics",
58        url: "#",
59        icon: (
60          <IconPlaceholder
61            lucide="ChartLineIcon"
62            tabler="IconChartLine"
63            hugeicons="ChartIcon"
64            phosphor="ChartLineIcon"
65          />
66        ),
67        items: [
68          {
69            title: "Reports",
70            url: "#",
71          },
72          {
73            title: "Metrics",
74            url: "#",
75          },
76        ],
77      },
78      {
79        title: "Orders",
80        url: "#",
81        icon: (
82          <IconPlaceholder
83            lucide="ShoppingBagIcon"
84            tabler="IconShoppingBag"
85            hugeicons="ShoppingBag01Icon"
86            phosphor="BagIcon"
87          />
88        ),
89        items: [
90          {
91            title: "All Orders",
92            url: "#",
93          },
94          {
95            title: "Pending",
96            url: "#",
97          },
98          {
99            title: "Completed",
100            url: "#",
101          },
102        ],
103      },
104      {
105        title: "Products",
106        url: "#",
107        icon: (
108          <IconPlaceholder
109            lucide="ShoppingCartIcon"
110            tabler="IconShoppingCart"
111            hugeicons="ShoppingCart01Icon"
112            phosphor="ShoppingCartIcon"
113          />
114        ),
115        items: [
116          {
117            title: "All Products",
118            url: "#",
119// … truncated