From b3ad47fe83f3aa99bf2cbe0fb9effa35bd5c89fc Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Mon, 18 Aug 2025 11:58:10 +0000
Subject: [PATCH] Improve sidebar consistency across different modules

Implement fixed width classes for the sidebar to ensure consistent sizing across all application modules, including the SAV module, and enhance localStorage handling for sidebar state persistence.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: f9197b9b-a5b3-4469-a27d-930a9e9ee736
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/f9197b9b-a5b3-4469-a27d-930a9e9ee736/b03w3Om
---
 client/src/components/Layout.tsx  | 10 ++++++++--
 client/src/components/Sidebar.tsx | 21 ++++++++++++++++++---
 client/src/index.css              | 15 +++++++++++++++
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index e900af4..c58f462 100644
--- a/client/src/components/Layout.tsx
+++ b/client/src/components/Layout.tsx
@@ -52,8 +52,14 @@ export default function Layout({ children }: LayoutProps) {
 
   const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(() => {
     // Restaurer l'état de la sidebar depuis localStorage, mais forcer collapsed sur mobile
-    const saved = localStorage.getItem('sidebarCollapsed');
-    return isMobile ? true : (saved ? JSON.parse(saved) : false);
+    try {
+      const saved = localStorage.getItem('sidebarCollapsed');
+      console.log('🔧 Layout - Restoring sidebar state:', { saved, isMobile });
+      return isMobile ? true : (saved ? JSON.parse(saved) : false);
+    } catch (error) {
+      console.error('Error reading sidebar state from localStorage:', error);
+      return isMobile ? true : false;
+    }
   });
 
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 776ba37..f2fc4dd 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -54,8 +54,14 @@ export default function Sidebar() {
 
   const toggleSidebar = () => {
     const newCollapsed = !sidebarCollapsed;
+    console.log('🔧 Sidebar - Toggling sidebar:', { from: sidebarCollapsed, to: newCollapsed });
     setSidebarCollapsed(newCollapsed);
-    localStorage.setItem('sidebarCollapsed', JSON.stringify(newCollapsed));
+    try {
+      localStorage.setItem('sidebarCollapsed', JSON.stringify(newCollapsed));
+      console.log('💾 Sidebar state saved to localStorage:', newCollapsed);
+    } catch (error) {
+      console.error('Error saving sidebar state:', error);
+    }
   };
 
   const getInitials = (firstName?: string, lastName?: string) => {
@@ -170,12 +176,21 @@ export default function Sidebar() {
 
 
 
-  // Classes responsives pour la sidebar
+  // Classes responsives pour la sidebar avec classes CSS forcées pour cohérence
   const sidebarClasses = isMobile 
     ? `fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200 shadow-lg transform transition-transform duration-300 ease-in-out ${
         mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'
       }`
-    : `${sidebarCollapsed ? 'w-16' : 'w-64'} bg-white border-r border-gray-200 flex flex-col shadow-lg transition-all duration-300 ease-in-out`;
+    : `${sidebarCollapsed ? 'sidebar-collapsed' : 'sidebar-expanded'} bg-white border-r border-gray-200 flex flex-col shadow-lg transition-all duration-300 ease-in-out`;
+  
+  // Debug log pour vérifier l'état de la sidebar
+  console.log('🔧 Sidebar Debug:', { 
+    isMobile, 
+    sidebarCollapsed, 
+    mobileMenuOpen, 
+    width: sidebarCollapsed ? 'collapsed (64px)' : 'expanded (256px)',
+    classes: sidebarClasses
+  });
 
   // Si l'utilisateur n'est pas encore chargé, afficher un état de chargement
   if (isLoading) {
diff --git a/client/src/index.css b/client/src/index.css
index 62e9f72..518fc8f 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -64,11 +64,26 @@
     @apply font-sans antialiased bg-surface text-foreground;
     overflow-x: hidden !important;
     max-width: 100vw;
+    height: 100%;
   }
   
   #root {
     overflow-x: hidden !important;
     max-width: 100vw;
+    height: 100%;
+  }
+
+  /* Forcer la cohérence des largeurs de sidebar */
+  .sidebar-collapsed {
+    width: 4rem !important;
+    min-width: 4rem !important;
+    max-width: 4rem !important;
+  }
+  
+  .sidebar-expanded {
+    width: 16rem !important;
+    min-width: 16rem !important;
+    max-width: 16rem !important;
   }
 }