Projects/front/src/components/admin/AdminSidebar.tsx

// src/components/admin/AdminSidebar.tsx
import { NavLink } from "react-router-dom";
import { 
  LayoutDashboard, Users, FileText, Activity, Settings
} from "lucide-react";

const menuItems = [
  { to: "/admin", icon: LayoutDashboard, label: "Dashboard" },
  { to: "/admin/users", icon: Users, label: "Users" },
  { to: "/admin/blog", icon: FileText, label: "Blog Moderation" },
  { to: "/status", icon: Activity, label: "System Status" },
  { to: "/settings", icon: Settings, label: "My Settings" },
];

export function AdminSidebar() {
  return (
    <aside className="sticky top-0 hidden min-h-screen w-64 border-r border-white/60 bg-white/85 backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/80 lg:block">
      <div className="border-b border-gray-200 px-4 py-4 dark:border-gray-800">
        <div className="text-xs font-semibold uppercase tracking-[0.22em] text-gray-400">Administration</div>
        <div className="mt-1 text-sm font-semibold text-gray-900 dark:text-white">Control center</div>
      </div>
      <nav className="space-y-1 p-4" aria-label="Admin navigation">
        {menuItems.map((item) => (
          <NavLink
            key={item.to}
            to={item.to}
            aria-label={item.label}
            className={({ isActive }) => `
              flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
              ${isActive 
                ? "bg-gradient-to-r from-primary to-secondary text-white shadow-md" 
                : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
              }
            `}
          >
            <item.icon className="w-4 h-4" />
            <span>{item.label}</span>
          </NavLink>
        ))}
      </nav>
    </aside>
  );
}