51 lines
2.1 KiB
TypeScript
51 lines
2.1 KiB
TypeScript
'use client'
|
||
|
||
import Link from 'next/link'
|
||
import { usePathname } from 'next/navigation'
|
||
import { LayoutDashboard, Users, Settings, BedDouble } from 'lucide-react'
|
||
|
||
export const ADMIN_NAVIGATION = [
|
||
{ name: 'Dashboard', href: '/admin', icon: LayoutDashboard },
|
||
{ name: 'Odalar', href: '/admin/rooms', icon: BedDouble },
|
||
{ name: 'Kullanıcılar', href: '/admin/users', icon: Users },
|
||
{ name: 'Ayarlar', href: '/admin/settings', icon: Settings },
|
||
]
|
||
|
||
export function AdminSidebar() {
|
||
const pathname = usePathname()
|
||
|
||
return (
|
||
<div className="hidden border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 md:flex md:flex-col md:w-64 flex-shrink-0">
|
||
<div className="flex h-16 items-center border-b border-gray-200 dark:border-gray-800 px-6">
|
||
<h1 className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400">
|
||
Sitar Admin
|
||
</h1>
|
||
</div>
|
||
<div className="flex-1 overflow-y-auto px-4 py-6">
|
||
<nav className="flex flex-col space-y-1">
|
||
{ADMIN_NAVIGATION.map((item) => {
|
||
const isActive = pathname === item.href || (item.href !== '/admin' && pathname.startsWith(item.href))
|
||
return (
|
||
<Link
|
||
key={item.name}
|
||
href={item.href}
|
||
className={`
|
||
group flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-all duration-200
|
||
${isActive
|
||
? 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400'
|
||
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'}
|
||
`}
|
||
>
|
||
<item.icon
|
||
className={`mr-3 h-5 w-5 flex-shrink-0 transition-colors duration-200 ${isActive ? 'text-blue-700 dark:text-blue-400' : 'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300'}`}
|
||
/>
|
||
{item.name}
|
||
</Link>
|
||
)
|
||
})}
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|