Merge pull request #215 from R0m1k3/1.1

Improve sidebar consistency across different modules

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