48 lines
1.9 KiB
TypeScript
48 lines
1.9 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { usePathname } from "next/navigation";
|
||
import { LayoutDashboard, Settings, Image as ImageIcon, Compass, CalendarDays, Star, Info, Users } from "lucide-react";
|
||
|
||
export default function SidebarNav() {
|
||
const pathname = usePathname();
|
||
|
||
const navLinks = [
|
||
{ name: "Gösterge Paneli", href: "/admin", icon: LayoutDashboard },
|
||
{ name: "Site Ayarları", href: "/admin/settings", icon: Settings },
|
||
{ name: "Hero Bölümü", href: "/admin/hero", icon: ImageIcon },
|
||
{ name: "Hakkımızda", href: "/admin/about", icon: Info },
|
||
{ name: "Özellikler", href: "/admin/features", icon: Star },
|
||
{ name: "Aktiviteler", href: "/admin/activities", icon: Compass },
|
||
{ name: "Etkinlikler", href: "/admin/events", icon: CalendarDays },
|
||
{ name: "Kullanıcılar", href: "/admin/users", icon: Users },
|
||
];
|
||
|
||
return (
|
||
<nav className="flex-1 px-4 py-6 space-y-2 overflow-y-auto">
|
||
{navLinks.map((link) => {
|
||
const isActive = pathname === link.href || (link.href !== "/admin" && pathname?.startsWith(link.href));
|
||
const Icon = link.icon;
|
||
|
||
return (
|
||
<Link
|
||
key={link.name}
|
||
href={link.href}
|
||
className={`flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 relative group ${
|
||
isActive
|
||
? "bg-white/10 text-white shadow-lg backdrop-blur-md"
|
||
: "text-white/60 hover:bg-white/5 hover:text-white"
|
||
}`}
|
||
>
|
||
{isActive && (
|
||
<div className="absolute left-0 top-1/2 -translate-y-1/2 w-1.5 h-8 bg-accent rounded-r-full shadow-[0_0_10px_rgba(var(--accent),0.5)]" />
|
||
)}
|
||
<Icon className={`w-5 h-5 transition-transform duration-300 ${isActive ? "scale-110" : "group-hover:scale-110"}`} />
|
||
<span className="font-medium text-sm tracking-wide">{link.name}</span>
|
||
</Link>
|
||
);
|
||
})}
|
||
</nav>
|
||
);
|
||
}
|