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(() => { // 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; } }