Sidebar - Copy this React, Tailwind Component to your project

Import { Button } from "@/components/ui/button" import { ScrollArea } from "@/components/ui/scroll area" export function Sidebar({ open, setOpen }) { const navItems = [ { name: 'Dashboard', href: '/' }, { name: 'CCTV', href: '/service_requests/cctv' }, { name: 'Security Alarm', href: '/security alarm' }, { name: 'Fire Extinguisher', href: '/fire extinguisher' }, { name: 'E Surveillance', href: '/e surveillance' }, { name: 'Telephone & Dongle', href: '/telephone dongle' }, { name: 'New Branch Proposal', href: '/new branch proposal' }, { name: 'Premises Shifting', href: '/premises shifting' }, { name: 'Premises Renovation', href: '/premises renovation' }, { name: 'Premises Infra', href: '/premises infra' }, { name: 'Fixed Asset & Misc', href: '/fixed asset misc' }, ] return ( <div className={`fixed inset y 0 left 0 z 50 w 64 bg white shadow lg transform ${open ? 'translate x 0' : ' translate x full'} transition transform duration 300 ease in out`}> <div className="flex items center justify center h 16 bg gray 900"> <span className="text white text 2xl font semibold">PDD Support</span> </div> <ScrollArea className="h full"> <nav className="mt 5"> {navItems.map((item) => ( <Button key={item.name} variant="ghost" className="w full justify start" onClick={() => setOpen(false)} > {item.name} </Button> ))} </nav> </ScrollArea> </div> ) } Include icons in sidebar from lucide react; Also add navigation feature