From 59389aa08d3527fa69050e8f6ce49df5aa5ff0d6 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Tue, 12 Aug 2025 07:53:35 +0000 Subject: [PATCH] Add ability to collapse and expand the application sidebar Introduce sidebar collapse/expand functionality to the application layout, allowing users to toggle the visibility of the sidebar. This involves updating the StoreContext to include sidebar state and functions, and modifying the Sidebar component to handle the toggle action and persist the state in localStorage. Replit-Commit-Author: Agent Replit-Commit-Session-Id: b163d4c0-de5e-4f4e-a9c0-aed4c7049718 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/b163d4c0-de5e-4f4e-a9c0-aed4c7049718/xTmsprA --- client/src/components/Layout.tsx | 14 +- client/src/components/Sidebar.tsx | 225 +++++++++++++++++++++--------- 2 files changed, 172 insertions(+), 67 deletions(-) diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx index f8362f8..6acc5be 100644 --- a/client/src/components/Layout.tsx +++ b/client/src/components/Layout.tsx @@ -11,6 +11,8 @@ interface StoreContextType { selectedStoreId: number | null; setSelectedStoreId: (storeId: number | null) => void; stores: Group[]; + sidebarCollapsed: boolean; + setSidebarCollapsed: (collapsed: boolean) => void; } const StoreContext = createContext(undefined); @@ -38,6 +40,12 @@ export default function Layout({ children }: LayoutProps) { return restoredId; }); + const [sidebarCollapsed, setSidebarCollapsed] = useState(() => { + // Restaurer l'état de la sidebar depuis localStorage + const saved = localStorage.getItem('sidebarCollapsed'); + return saved ? JSON.parse(saved) : false; + }); + const { data: stores = [] } = useQuery({ queryKey: ['/api/groups'], enabled: !!user, @@ -48,7 +56,7 @@ export default function Layout({ children }: LayoutProps) { }; return ( - +
@@ -72,9 +80,9 @@ export default function Layout({ children }: LayoutProps) { console.log('🧹 Invalidating data caches for store change'); queryClient.invalidateQueries({ predicate: (query) => { const key = query.queryKey; - return key[0]?.toString().includes('/api/orders') || + return Boolean(key[0]?.toString().includes('/api/orders') || key[0]?.toString().includes('/api/deliveries') || - key[0]?.toString().includes('/api/stats/monthly'); + key[0]?.toString().includes('/api/stats/monthly')); }}); // Sauvegarder dans localStorage et mettre à jour l'état diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx index d6b879a..065a88a 100644 --- a/client/src/components/Sidebar.tsx +++ b/client/src/components/Sidebar.tsx @@ -1,6 +1,7 @@ import { Link, useLocation } from "wouter"; import { useAuthSimple } from "@/hooks/useAuthSimple"; import { Button } from "@/components/ui/button"; +import { useStore } from "./Layout"; import { Store, Calendar, @@ -16,12 +17,15 @@ import { Database, ShoppingCart, Clock, - ListTodo + ListTodo, + ChevronLeft, + ChevronRight } from "lucide-react"; export default function Sidebar() { const { user, isLoading, error } = useAuthSimple(); const [location] = useLocation(); + const { sidebarCollapsed, setSidebarCollapsed } = useStore(); // Debug logging pour production console.log('Sidebar - User:', user); @@ -43,6 +47,12 @@ export default function Sidebar() { } }; + const toggleSidebar = () => { + const newCollapsed = !sidebarCollapsed; + setSidebarCollapsed(newCollapsed); + localStorage.setItem('sidebarCollapsed', JSON.stringify(newCollapsed)); + }; + const getInitials = (firstName?: string, lastName?: string) => { if (!firstName && !lastName) return "U"; return `${firstName?.[0] || ""}${lastName?.[0] || ""}`.toUpperCase(); @@ -155,12 +165,31 @@ export default function Sidebar() { // Si l'utilisateur n'est pas encore chargé, afficher un état de chargement if (isLoading) { return ( -