import { Home, PlusCircle, CalendarClock, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight, ChevronDown, Wand2, BarChart3, Video, Music, Shield } from "lucide-react"; import { Link, useLocation } from "wouter"; import { useQuery, useMutation } from "@tanstack/react-query"; import { apiRequest, AUTH_MUTATION, queryClient } from "@/lib/queryClient"; import { useToast } from "@/hooks/use-toast"; import { Button } from "@/components/ui/button"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { useState, useEffect } from "react"; interface SidebarProps { onLinkClick?: () => void; } export default function Sidebar({ onLinkClick }: SidebarProps = {}) { const [location] = useLocation(); const [, setLocation] = useLocation(); const { toast } = useToast(); const [isCollapsed, setIsCollapsed] = useState(() => { const saved = localStorage.getItem('sidebar-collapsed'); return saved === 'true'; }); const [adminExpanded, setAdminExpanded] = useState(() => { const saved = localStorage.getItem('sidebar-admin-expanded'); return saved !== 'false'; // default: expanded }); useEffect(() => { localStorage.setItem('sidebar-collapsed', String(isCollapsed)); }, [isCollapsed]); useEffect(() => { localStorage.setItem('sidebar-admin-expanded', String(adminExpanded)); }, [adminExpanded]); const { data: session } = useQuery<{ id: string; username: string; role: string }>({ queryKey: ["/api/auth/session"], retry: false, }); const isAdmin = session?.role === "admin"; const handleLinkClick = (href: string, e: React.MouseEvent) => { e.preventDefault(); // Always close sidebar on mobile first if (onLinkClick) { onLinkClick(); } // Navigate after a small delay to ensure state update completes setTimeout(() => { setLocation(href); }, 10); }; const logoutMutation = useMutation({ mutationKey: [AUTH_MUTATION, "logout"], mutationFn: async () => { const res = await apiRequest("POST", "/api/auth/logout", {}); return await res.json(); }, onSuccess: () => { queryClient.clear(); setLocation("/login"); toast({ title: "Déconnecté", description: "Vous avez été déconnecté avec succès", }); }, }); const navItems = [ { icon: Home, label: "Tableau de bord", href: "/", badge: null }, { icon: PlusCircle, label: "Nouvelle publication", href: "/new", badge: null }, { icon: Video, label: "Nouveau Reel", href: "/reel", badge: null }, { icon: CalendarClock, label: "Programmer un Reel", href: "/reel/schedule", badge: null }, { icon: Calendar, label: "Calendrier", href: "/calendar", badge: null }, { icon: Images, label: "Médiathèque", href: "/media", badge: null }, { icon: Wand2, label: "Éditeur d'images", href: "/image-editor", badge: null }, { icon: BarChart3, label: "Analytics", href: "/analytics", badge: null }, ]; const statsItems = [ { icon: Clock, label: "Historique", href: "/history" }, ]; return ( ); }