only front-end init

components/admin/AdminSidebar.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { LayoutDashboard, Package, CalendarCheck, LogOut, Home } from "lucide-react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarFooter,
+  SidebarHeader,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { useAdmin } from "@/contexts/AdminContext";
+import { Button } from "@/components/ui/button";
+import { usePathname, useRouter } from "next/navigation";
+import Link from "next/link";
+import { useState } from "react";
+
+const items = [
+  { title: "Vue d'ensemble", url: "/admin", icon: LayoutDashboard, end: true },
+  { title: "Produits", url: "/admin/produits", icon: Package },
+  { title: "Réservations", url: "/admin/reservations", icon: CalendarCheck },
+];
+
+export const AdminSidebar = () => {
+  const { state } = useSidebar();
+  const collapsed = state === "collapsed";
+  const { logout } = useAdmin();
+  const route = useRouter();
+  const pathname = usePathname();
+  const [isActive, setIsActive] = useState("");
+
+
+  const handleLogout = () => {
+    logout();
+    route.push("/admin/login");
+  };
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader className="border-b border-sidebar-border p-4">
+        {!collapsed && (
+          <div className="font-serif text-lg font-semibold tracking-wide">
+            BADO HAIR
+            <div className="text-xs text-muted-foreground font-sans font-normal">Admin</div>
+          </div>
+        )}
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Gestion</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <Link
+                      href={item.url}
+                      className={`flex items-center gap-2 ${isActive === item.url ? "bg-sidebar-accent text-sidebar-accent-foreground font-medium" : ""}`}
+                    >
+                      <item.icon className="h-4 w-4" />
+                      {!collapsed && <span>{item.title}</span>}
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter className="border-t border-sidebar-border p-2 space-y-1">
+        <SidebarMenuButton asChild>
+          <Link href="/" className="flex items-center gap-2">
+            <Home className="h-4 w-4" />
+            {!collapsed && <span>Voir le site</span>}
+          </Link>
+        </SidebarMenuButton>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleLogout}
+          className="w-full justify-start gap-2"
+        >
+          <LogOut className="h-4 w-4" />
+          {!collapsed && <span>Déconnexion</span>}
+        </Button>
+      </SidebarFooter>
+    </Sidebar>
+  );
+};