"use client" import { useState } from "react" // shadcn import { Button } from "@/components/ui/button" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, useSidebar, } from "@/components/ui/sidebar" // assets import { FrameIcon, LifeBuoyIcon, MapIcon, PanelLeftCloseIcon, PanelLeftOpenIcon, PieChartIcon, SendIcon, } from "lucide-react" const projects = [ { name: "Design Engineering", url: "#", icon: FrameIcon, }, { name: "Sales & Marketing", url: "#", icon: PieChartIcon, }, { name: "Travel", url: "#", icon: MapIcon, }, { name: "Support", url: "#", icon: LifeBuoyIcon, }, { name: "Feedback", url: "#", icon: SendIcon, }, ] function CustomTrigger() { const { toggleSidebar, state, isMobile, openMobile } = useSidebar() const isOpen = isMobile ? openMobile : state === "expanded" return ( ) } // ------------------------------ | SIDEBAR - CONTROLLED | ------------------------------ // export default function AppSidebar() { const [open, setOpen] = useState(true) return ( Projects {projects.map((project) => ( }> {project.name} ))}

) }