Add slots based per class, admin courses mgmt, admin roles, horizontal nav/landing, glove favicon

app/admin/admin-layout.tsx

@@ -5,13 +5,14 @@ import { usePathname } from "next/navigation";
 import Header from "@/components/Header";
 
 const adminLinks = [
-  { href: "/admin", label: "Vue d'ensemble", icon: "🏠" },
+  { href: "/admin", label: "Accueil", icon: "🏠" },
   { href: "/admin/users", label: "Membres", icon: "👥" },
   { href: "/admin/messages", label: "Messages", icon: "💬" },
-  { href: "/admin/media", label: "Photos & vidéos", icon: "🎬" },
+  { href: "/admin/media", label: "Médias", icon: "🎬" },
+  { href: "/admin/classes", label: "Cours", icon: "📅" },
   { href: "/admin/homework", label: "Exercices", icon: "🏋️" },
   { href: "/admin/certificates", label: "Certificats", icon: "📄" },
-  { href: "/admin/yoga", label: "Gestion Yoga", icon: "🧘" },
+  { href: "/admin/yoga", label: "Yoga", icon: "🧘" },
 ];
 
 export default function AdminLayout({
@@ -32,7 +33,7 @@ export default function AdminLayout({
           Gère ton club JuanitoSport
         </p>
 
-        <nav className="mb-6 flex gap-2 overflow-x-auto pb-2 -mx-4 px-4">
+        <nav className="mb-6 grid grid-cols-4 gap-1.5 sm:gap-2">
           {adminLinks.map((link) => {
             const active =
               pathname === link.href ||
@@ -41,14 +42,14 @@ export default function AdminLayout({
               <Link
                 key={link.href}
                 href={link.href}
-                className={`flex shrink-0 items-center gap-1.5 rounded-xl px-4 py-2 text-sm font-semibold transition-colors ${
+                className={`flex flex-col items-center justify-center gap-0.5 rounded-xl px-1 py-2.5 text-center text-[11px] font-semibold transition-colors sm:flex-row sm:gap-1.5 sm:px-3 sm:py-2 sm:text-xs ${
                   active
                     ? "bg-primary-600 text-white"
                     : "bg-white/5 text-white/70 hover:bg-white/10"
                 }`}
               >
-                <span>{link.icon}</span>
-                <span>{link.label}</span>
+                <span className="text-base leading-none sm:text-lg">{link.icon}</span>
+                <span className="leading-tight">{link.label}</span>
               </Link>
             );
           })}