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

@@ -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);

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) {

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;
   }
 }