49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { useAppStore } from '@/stores/appStore'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Home, Settings, Users, FileText, Folder } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
|
|
const sidebarItems = [
|
|
{ icon: Home, label: 'Home', href: '/' },
|
|
{ icon: Folder, label: 'Files', href: '/files' },
|
|
{ icon: FileText, label: 'Documents', href: '/documents' },
|
|
{ icon: Users, label: 'Users', href: '/users' },
|
|
{ icon: Settings, label: 'Settings', href: '/settings' },
|
|
]
|
|
|
|
export function Sidebar() {
|
|
const { sidebarOpen } = useAppStore()
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<aside
|
|
className={cn(
|
|
'fixed left-0 top-14 z-40 h-[calc(100vh-3.5rem)] w-64 border-r bg-background transition-transform duration-300 ease-in-out md:translate-x-0',
|
|
sidebarOpen ? 'translate-x-0' : '-translate-x-full'
|
|
)}
|
|
>
|
|
<div className="flex flex-col gap-2 p-4">
|
|
{sidebarItems.map((item) => {
|
|
const Icon = item.icon
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link key={item.href} href={item.href}>
|
|
<Button
|
|
variant={isActive ? 'secondary' : 'ghost'}
|
|
className="w-full justify-start gap-2"
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{item.label}
|
|
</Button>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|