Sidebar (Icon)

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