'use client'; import * as React from 'react'; import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from '@/components/ui/breadcrumb'; import { Separator } from '@/components/ui/separator'; import { SidebarProvider, SidebarInset, SidebarTrigger, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarRail, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuAction, } from '@/components/animate-ui/radix-sidebar'; // } from '@/components/ui/sidebar'; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from '@/components/animate-ui/radix-collapsible'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from '@/components/animate-ui/radix-dropdown-menu'; import { AudioWaveform, BadgeCheck, Bell, BookOpen, Bot, ChevronRight, ChevronsUpDown, Command, CreditCard, Folder, Forward, Frame, GalleryVerticalEnd, LogOut, Map, MoreHorizontal, PieChart, Plus, Settings2, Sparkles, SquareTerminal, Trash2, } from 'lucide-react'; import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { useIsMobile } from '@/hooks/use-mobile'; const DATA = { user: { name: 'Skyleen', email: 'skyleen@example.com', avatar: 'https://pbs.twimg.com/profile_images/1909615404789506048/MTqvRsjo_400x400.jpg', }, teams: [ { name: 'Acme Inc', logo: GalleryVerticalEnd, plan: 'Enterprise', }, { name: 'Acme Corp.', logo: AudioWaveform, plan: 'Startup', }, { name: 'Evil Corp.', logo: Command, plan: 'Free', }, ], navMain: [ { title: 'Playground', url: '#', icon: SquareTerminal, isActive: true, items: [ { title: 'History', url: '#', }, { title: 'Starred', url: '#', }, { title: 'Settings', url: '#', }, ], }, { title: 'Models', url: '#', icon: Bot, items: [ { title: 'Genesis', url: '#', }, { title: 'Explorer', url: '#', }, { title: 'Quantum', url: '#', }, ], }, { title: 'Documentation', url: '#', icon: BookOpen, items: [ { title: 'Introduction', url: '#', }, { title: 'Get Started', url: '#', }, { title: 'Tutorials', url: '#', }, { title: 'Changelog', url: '#', }, ], }, { title: 'Settings', url: '#', icon: Settings2, items: [ { title: 'General', url: '#', }, { title: 'Team', url: '#', }, { title: 'Billing', url: '#', }, { title: 'Limits', url: '#', }, ], }, ], projects: [ { name: 'Design Engineering', url: '#', icon: Frame, }, { name: 'Sales & Marketing', url: '#', icon: PieChart, }, { name: 'Travel', url: '#', icon: Map, }, ], }; export const RadixSidebarDemo = () => { const isMobile = useIsMobile(); const [activeTeam, setActiveTeam] = React.useState(DATA.teams[0]); if (!activeTeam) return null; return ( {/* Team Switcher */}

{activeTeam.name} {activeTeam.plan}

Teams {DATA.teams.map((team, index) => ( setActiveTeam(team)} className="gap-2 p-2" >

{team.name} ⌘{index + 1} ))}

Add team

{/* Team Switcher */} {/* Nav Main */} Platform {DATA.navMain.map((item) => ( {item.icon && } {item.title} {item.items?.map((subItem) => ( {subItem.title} ))} ))} {/* Nav Main */} {/* Nav Project */} Projects {DATA.projects.map((item) => ( {item.name} More View Project Share Project Delete Project ))} More {/* Nav Project */} {/* Nav User */} CN

{DATA.user.name} {DATA.user.email}

Upgrade to Pro Account Billing Notifications Log out {/* Nav User */}

Building Your Application Data Fetching

); };

Sidebar

Installation

Props

Animate UI props

Sidebar

Credits

On this page