Sidebar (Icon)

1"use client"
2 
3import * as React from "react"
4 
5import {
6  Avatar,
7  AvatarFallback,
8  AvatarImage,
9} from "@/registry/base-vega/ui/avatar"
10import { Button } from "@/registry/base-vega/ui/button"
11import {
12  Collapsible,
13  CollapsibleContent,
14  CollapsibleTrigger,
15} from "@/registry/base-vega/ui/collapsible"
16import {
17  DropdownMenu,
18  DropdownMenuContent,
19  DropdownMenuGroup,
20  DropdownMenuItem,
21  DropdownMenuLabel,
22  DropdownMenuSeparator,
23  DropdownMenuTrigger,
24} from "@/registry/base-vega/ui/dropdown-menu"
25import {
26  Item,
27  ItemContent,
28  ItemDescription,
29  ItemMedia,
30  ItemTitle,
31} from "@/registry/base-vega/ui/item"
32import {
33  Sidebar,
34  SidebarContent,
35  SidebarFooter,
36  SidebarGroup,
37  SidebarGroupLabel,
38  SidebarHeader,
39  SidebarInset,
40  SidebarMenu,
41  SidebarMenuButton,
42  SidebarMenuItem,
43  SidebarMenuSub,
44  SidebarMenuSubButton,
45  SidebarMenuSubItem,
46  SidebarProvider,
47  SidebarRail,
48  SidebarTrigger,
49} from "@/registry/base-vega/ui/sidebar"
50import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
51 
52export default function SidebarIconExample() {
53  const data = {
54    user: {
55      name: "shadcn",
56      email: "m@example.com",
57      avatar: "/avatars/shadcn.jpg",
58    },
59    teams: [
60      {
61        name: "Acme Inc",
62        plan: "Enterprise",
63      },
64      {
65        name: "Acme Corp.",
66        plan: "Startup",
67      },
68      {
69        name: "Evil Corp.",
70        plan: "Free",
71      },
72    ],
73    navMain: [
74      {
75        title: "Playground",
76        url: "#",
77        icon: (
78          <IconPlaceholder
79            lucide="TerminalSquareIcon"
80            tabler="IconTerminal2"
81            hugeicons="ComputerTerminalIcon"
82            phosphor="TerminalIcon"
83            remixicon="RiTerminalBoxLine"
84          />
85        ),
86        isActive: true,
87        items: [
88          {
89            title: "History",
90            url: "#",
91          },
92          {
93            title: "Starred",
94            url: "#",
95          },
96          {
97            title: "Settings",
98            url: "#",
99          },
100        ],
101      },
102      {
103        title: "Models",
104        url: "#",
105        icon: (
106          <IconPlaceholder
107            lucide="BotIcon"
108            tabler="IconRobot"
109            hugeicons="RoboticIcon"
110            phosphor="RobotIcon"
111            remixicon="RiRobotLine"
112          />
113        ),
114        items: [
115          {
116            title: "Genesis",
117            url: "#",
118          },
119          {
120            title: "Explorer",
121// … truncated