Sidebar (Inset)

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Collapsible,
7  CollapsibleContent,
8  CollapsibleTrigger,
9} from "@/registry/base-vega/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/base-vega/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            remixicon="RiHomeLine"
43          />
44        ),
45        isActive: true,
46        items: [
47          {
48            title: "Overview",
49            url: "#",
50          },
51          {
52            title: "Analytics",
53            url: "#",
54          },
55        ],
56      },
57      {
58        title: "Analytics",
59        url: "#",
60        icon: (
61          <IconPlaceholder
62            lucide="ChartLineIcon"
63            tabler="IconChartLine"
64            hugeicons="ChartIcon"
65            phosphor="ChartLineIcon"
66            remixicon="RiLineChartLine"
67          />
68        ),
69        items: [
70          {
71            title: "Reports",
72            url: "#",
73          },
74          {
75            title: "Metrics",
76            url: "#",
77          },
78        ],
79      },
80      {
81        title: "Orders",
82        url: "#",
83        icon: (
84          <IconPlaceholder
85            lucide="ShoppingBagIcon"
86            tabler="IconShoppingBag"
87            hugeicons="ShoppingBag01Icon"
88            phosphor="BagIcon"
89            remixicon="RiShoppingBagLine"
90          />
91        ),
92        items: [
93          {
94            title: "All Orders",
95            url: "#",
96          },
97          {
98            title: "Pending",
99            url: "#",
100          },
101          {
102            title: "Completed",
103            url: "#",
104          },
105        ],
106      },
107      {
108        title: "Products",
109        url: "#",
110        icon: (
111          <IconPlaceholder
112            lucide="ShoppingCartIcon"
113            tabler="IconShoppingCart"
114            hugeicons="ShoppingCart01Icon"
115            phosphor="ShoppingCartIcon"
116// … truncated