45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { Home, Heart, Settings } from 'lucide-react'
|
|
|
|
const navItems = [
|
|
{ href: '/', icon: Home, label: 'Home' },
|
|
{ href: '/interests', icon: Heart, label: 'Interests' },
|
|
{ href: '/settings', icon: Settings, label: 'Settings' },
|
|
]
|
|
|
|
export function Sidebar() {
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<aside className="w-16 bg-sidebar border-r border-sidebar-border flex flex-col items-center py-4 gap-2">
|
|
{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={`
|
|
w-12 h-12 flex items-center justify-center transition-colors relative
|
|
${isActive
|
|
? 'bg-sidebar-primary text-sidebar-primary-foreground'
|
|
: 'text-sidebar-foreground hover:bg-secondary'
|
|
}
|
|
`}
|
|
title={item.label}
|
|
>
|
|
{isActive && (
|
|
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
|
|
)}
|
|
<Icon size={24} />
|
|
</Link>
|
|
)
|
|
})}
|
|
</aside>
|
|
)
|
|
}
|