management-dashboard-web-app/src/components/DashboardLayout.tsx

@@ -26,9 +26,8 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [currentView, setCurrentView] = useState('dashboard')
-  const [isExpanded, setIsExpanded] = useState(true)
+  const [isExpanded, setIsExpanded] = useState(false)
   const [isMobileOpen, setIsMobileOpen] = useState(false)
-  const [isHovered, setIsHovered] = useState(false)
 
   // Valid dashboard views
   const validViews = ['dashboard', 'user-management', 'experiments', 'analytics', 'data-entry', 'vision-system', 'scheduling', 'video-library', 'profile']
@@ -53,6 +52,26 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
     }
   }
 
+  // Save sidebar expanded state to localStorage
+  const saveSidebarState = (expanded: boolean) => {
+    try {
+      localStorage.setItem('sidebar-expanded', String(expanded))
+    } catch (error) {
+      console.warn('Failed to save sidebar state to localStorage:', error)
+    }
+  }
+
+  // Get saved sidebar state from localStorage
+  const getSavedSidebarState = (): boolean => {
+    try {
+      const saved = localStorage.getItem('sidebar-expanded')
+      return saved === 'true'
+    } catch (error) {
+      console.warn('Failed to get saved sidebar state from localStorage:', error)
+      return false
+    }
+  }
+
   // Check if user has access to a specific view
   const hasAccessToView = (view: string): boolean => {
     if (!user) return false
@@ -80,6 +99,9 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
 
   useEffect(() => {
     fetchUserProfile()
+    // Load saved sidebar state
+    const savedSidebarState = getSavedSidebarState()
+    setIsExpanded(savedSidebarState)
   }, [])
 
   // Restore saved view when user is loaded
@@ -144,7 +166,9 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
   }
 
   const toggleSidebar = () => {
-    setIsExpanded(!isExpanded)
+    const newState = !isExpanded
+    setIsExpanded(newState)
+    saveSidebarState(newState)
   }
 
   const toggleMobileSidebar = () => {
@@ -300,8 +324,6 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
           onViewChange={handleViewChange}
           isExpanded={isExpanded}
           isMobileOpen={isMobileOpen}
-          isHovered={isHovered}
-          setIsHovered={setIsHovered}
         />
         {/* Backdrop for mobile */}
         {isMobileOpen && (
@@ -312,7 +334,7 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
         )}
       </div>
       <div
-        className={`flex-1 transition-all duration-300 ease-in-out bg-gray-50 dark:bg-gray-900 flex flex-col min-h-0 ${isExpanded || isHovered ? "lg:ml-[290px]" : "lg:ml-[90px]"
+        className={`flex-1 transition-all duration-300 ease-in-out bg-gray-50 dark:bg-gray-900 flex flex-col min-h-0 ${isExpanded ? "lg:ml-[290px]" : "lg:ml-[90px]"
           } ${isMobileOpen ? "ml-0" : ""}`}
       >
         <TopNavbar