60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { LayoutDashboard, FolderKanban, Settings } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useUIStore } from '@/stores/ui-store';
|
|
|
|
const navItems = [
|
|
{
|
|
title: 'Dashboard',
|
|
href: '/dashboard',
|
|
icon: LayoutDashboard,
|
|
},
|
|
{
|
|
title: 'Projects',
|
|
href: '/projects',
|
|
icon: FolderKanban,
|
|
},
|
|
{
|
|
title: 'Settings',
|
|
href: '/settings',
|
|
icon: Settings,
|
|
},
|
|
];
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
const sidebarOpen = useUIStore((state) => state.sidebarOpen);
|
|
|
|
if (!sidebarOpen) return null;
|
|
|
|
return (
|
|
<aside className="fixed left-0 top-14 z-40 h-[calc(100vh-3.5rem)] w-64 border-r border-border bg-background">
|
|
<nav className="flex flex-col gap-1 p-4">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
|
|
isActive
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{item.title}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</aside>
|
|
);
|
|
}
|