52 lines
2.0 KiB
TypeScript
52 lines
2.0 KiB
TypeScript
'use client'
|
||
|
||
import Link from 'next/link'
|
||
import { usePathname } from 'next/navigation'
|
||
import { LayoutDashboard, Package, Settings, Tags, Users2 } from 'lucide-react'
|
||
|
||
const navItems = [
|
||
{ href: '/admin', icon: LayoutDashboard, label: 'Dashboard' },
|
||
{ href: '/admin/categories', icon: Tags, label: 'Kategoriler' },
|
||
{ href: '/admin/products', icon: Package, label: 'Ürünler' },
|
||
{ href: '/admin/users', icon: Users2, label: 'Kullanıcılar' },
|
||
{ href: '/admin/settings', icon: Settings, label: 'Ayarlar' },
|
||
]
|
||
|
||
export function Sidebar() {
|
||
const pathname = usePathname()
|
||
|
||
return (
|
||
<aside className="w-64 bg-white/80 backdrop-blur-xl border-r border-slate-200/60 hidden md:flex flex-col shadow-sm">
|
||
<div className="p-6 border-b border-slate-100">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center">
|
||
<span className="text-white font-bold text-lg leading-none">M</span>
|
||
</div>
|
||
<h2 className="text-xl font-bold tracking-tight text-slate-800">Admin</h2>
|
||
</div>
|
||
</div>
|
||
<nav className="flex-1 p-4 space-y-1.5 overflow-y-auto">
|
||
{navItems.map((item) => {
|
||
const isActive = pathname === item.href || (item.href !== '/admin' && pathname.startsWith(item.href))
|
||
const Icon = item.icon
|
||
|
||
return (
|
||
<Link
|
||
key={item.href}
|
||
href={item.href}
|
||
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all duration-200 font-medium ${
|
||
isActive
|
||
? 'bg-blue-50 text-blue-700 shadow-sm shadow-blue-100/50'
|
||
: 'text-slate-600 hover:bg-slate-50 hover:text-slate-900'
|
||
}`}
|
||
>
|
||
<Icon size={20} className={isActive ? 'text-blue-600' : 'text-slate-400'} strokeWidth={isActive ? 2.5 : 2} />
|
||
<span>{item.label}</span>
|
||
</Link>
|
||
)
|
||
})}
|
||
</nav>
|
||
</aside>
|
||
)
|
||
}
|