test_task_crm/frontend/src/components/navigation/sidebar.tsx

27 lines
740 B
TypeScript

import { NavLink } from 'react-router-dom'
import { appNavItems } from '@/config/navigation'
import { cn } from '@/lib/utils'
export const SidebarNav = () => {
return (
<nav className="flex flex-col gap-1">
{appNavItems.map(({ path, label, icon: Icon }) => (
<NavLink
key={path}
to={path}
className={({ isActive }) =>
cn(
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
isActive && 'bg-primary/10 text-primary',
)
}
>
<Icon className="h-4 w-4" />
{label}
</NavLink>
))}
</nav>
)
}