62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
'use client';
|
||
|
||
import Link from 'next/link';
|
||
import { usePathname, useRouter } from 'next/navigation';
|
||
import { LayoutDashboard, Image as ImageIcon, Briefcase, Mail, LogOut, Settings } from 'lucide-react';
|
||
import { logout } from '../actions';
|
||
|
||
const navItems = [
|
||
{ name: 'Dashboard', href: '/admin', icon: LayoutDashboard },
|
||
{ name: 'Hero (Ana Ekran)', href: '/admin/hero', icon: ImageIcon },
|
||
{ name: 'Galeri', href: '/admin/gallery', icon: ImageIcon },
|
||
{ name: 'Hizmetler', href: '/admin/services', icon: Briefcase },
|
||
{ name: 'İletişim Mesajları', href: '/admin/contact', icon: Mail },
|
||
{ name: 'Site Ayarları', href: '/admin/settings', icon: Settings },
|
||
];
|
||
|
||
export function Sidebar() {
|
||
const pathname = usePathname();
|
||
const router = useRouter();
|
||
|
||
const handleLogout = async () => {
|
||
await logout();
|
||
router.push('/admin/login');
|
||
};
|
||
|
||
return (
|
||
<aside className="w-64 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 hidden md:flex flex-col h-screen sticky top-0">
|
||
<div className="p-6 border-b border-slate-200 dark:border-slate-800">
|
||
<h2 className="text-2xl font-bold text-slate-800 dark:text-white">Admin Panel</h2>
|
||
</div>
|
||
<nav className="flex-1 p-4 space-y-1">
|
||
{navItems.map((item) => {
|
||
const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
|
||
return (
|
||
<Link
|
||
key={item.name}
|
||
href={item.href}
|
||
className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
|
||
isActive
|
||
? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-medium'
|
||
: 'text-slate-600 hover:bg-slate-50 dark:text-slate-400 dark:hover:bg-slate-800/50 hover:text-slate-900 dark:hover:text-white'
|
||
}`}
|
||
>
|
||
<item.icon className="w-5 h-5" />
|
||
<span>{item.name}</span>
|
||
</Link>
|
||
);
|
||
})}
|
||
</nav>
|
||
<div className="p-4 border-t border-slate-200 dark:border-slate-800">
|
||
<button
|
||
onClick={handleLogout}
|
||
className="flex items-center space-x-3 px-4 py-3 w-full rounded-lg text-slate-600 hover:bg-red-50 hover:text-red-600 dark:text-slate-400 dark:hover:bg-red-900/30 dark:hover:text-red-400 transition-colors"
|
||
>
|
||
<LogOut className="w-5 h-5" />
|
||
<span>Çıkış Yap</span>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
);
|
||
}
|