"use client" import * as React from "react" import { Bot, Inbox, LayoutGrid, PanelLeft, Settings, Users, } from "lucide-react" import { AnimatedSidebar, AnimatedSidebarContent, AnimatedSidebarGroup, AnimatedSidebarGroupContent, AnimatedSidebarGroupLabel, AnimatedSidebarInset, AnimatedSidebarMenu, AnimatedSidebarMenuButton, AnimatedSidebarMenuItem, AnimatedSidebarProvider, AnimatedSidebarRail, AnimatedSidebarTrigger, } from "@/components/motion/animated-sidebar" const NAV = [ { id: "inbox", label: "Inbox", icon: Inbox, badge: "12" }, { id: "agents", label: "Agents", icon: Bot }, { id: "projects", label: "Projects", icon: LayoutGrid }, { id: "team", label: "Team", icon: Users }, { id: "settings", label: "Settings", icon: Settings }, ] export default function AnimatedSidebarDemo() { const [active, setActive] = React.useState("inbox") const current = NAV.find((item) => item.id === active) ?? NAV[0] return ( Workspace {NAV.map(({ id, label, icon: Icon, badge }) => ( } isActive={id === active} badge={ badge ? ( {badge} ) : undefined } onSelect={() => setActive(id)} className="font-normal" > {label} ))}

{current.label}

Toggle the sidebar from the header, or drag its edge rail.

) }

SidebarNew

Installation

Dependencies

Source