Implement unified sidebar toggle and refine mobile UI

frontend/index.html

@@ -12,17 +12,16 @@
         <aside class="sidebar">
             <div class="sidebar-header">
                 <h2>AutoML</h2>
-                <button id="desktop-sidebar-toggle"><i class="fas fa-angle-left"></i></button>
             </div>
             <nav class="sidebar-nav">
                 <a href="#" class="nav-link active" data-page="load-dataset"><i class="fas fa-upload"></i><span class="nav-text">Load Dataset</span></a>
-                <a href="#" class="nav-link" data-page="train"><i class="fas fa-cogs"></i><span class="nav-text">Model Trainer</span></a>
+                <a href="#" class="#nav-link" data-page="train"><i class="fas fa-cogs"></i><span class="nav-text">Model Trainer</span></a>
                 <a href="#" class="nav-link" data-page="visualize"><i class="fas fa-chart-bar"></i><span class="nav-text">Visualize</span></a>
                 <a href="#" class="nav-link" data-page="ask"><i class="fas fa-question-circle"></i><span class="nav-text">Ask AI</span></a>
             </nav>
         </aside>
         <main class="main-content">
-            <button id="mobile-sidebar-toggle" class="mobile-toggle"><i class="fas fa-bars"></i></button>
+            <button id="sidebar-toggle" class="mobile-toggle"><i class="fas fa-bars"></i></button>
             <div class="overlay"></div>
             <div class="container">
                 <div id="load-dataset" class="page active">

frontend/main.js

@@ -3,9 +3,8 @@ document.addEventListener('DOMContentLoaded', () => {
     const pages = document.querySelectorAll('.page');
     const sidebar = document.querySelector('.sidebar');
     const mainContent = document.querySelector('.main-content');
-    const desktopSidebarToggle = document.getElementById('desktop-sidebar-toggle'); // Original desktop toggle
-    const mobileSidebarToggle = document.getElementById('mobile-sidebar-toggle'); // New mobile toggle
-    const overlay = document.querySelector('.overlay'); // New overlay
+    const sidebarToggle = document.getElementById('sidebar-toggle'); // Unified toggle button
+    const overlay = document.querySelector('.overlay');
     const loader = document.querySelector('.loader');
 
     function animateNavText() {
@@ -33,13 +32,12 @@ document.addEventListener('DOMContentLoaded', () => {
             document.getElementById(pageId).classList.add('active');
             link.classList.add('active');
 
-            // Close sidebar on mobile after navigation
-            if (isMobileView()) {
+            // Close sidebar and overlay after navigation on mobile
+            if (isMobileView() && sidebar.classList.contains('active')) {
                 sidebar.classList.remove('active');
                 overlay.classList.remove('active');
-                // Change icon back to bars when sidebar closes
-                mobileSidebarToggle.querySelector('i').classList.remove('fa-times');
-                mobileSidebarToggle.querySelector('i').classList.add('fa-bars');
+                sidebarToggle.querySelector('i').classList.remove('fa-times');
+                sidebarToggle.querySelector('i').classList.add('fa-bars');
             }
         });
     });
@@ -56,45 +54,52 @@ document.addEventListener('DOMContentLoaded', () => {
             sidebar.classList.remove('active'); // Start hidden on mobile
             overlay.classList.remove('active');
             mainContent.classList.remove('collapsed'); // Main content always full width on mobile
-            mobileSidebarToggle.style.display = 'flex'; // Ensure mobile toggle is visible
-            desktopSidebarToggle.style.display = 'none'; // Hide desktop toggle
+            sidebarToggle.classList.add('mobile-toggle'); // Ensure mobile toggle styles are applied
+            sidebarToggle.querySelector('i').classList.remove('fa-times'); // Ensure bars icon
+            sidebarToggle.querySelector('i').classList.add('fa-bars');
         } else {
             // Desktop default state
-            sidebar.classList.remove('collapsed');
             sidebar.classList.remove('active'); // Ensure mobile active state is removed
             overlay.classList.remove('active');
-            mainContent.classList.remove('collapsed');
-            mobileSidebarToggle.style.display = 'none'; // Hide mobile toggle
-            desktopSidebarToggle.style.display = 'block'; // Show desktop toggle
+            sidebarToggle.classList.remove('mobile-toggle'); // Remove mobile toggle styles
+            sidebarToggle.querySelector('i').classList.remove('fa-bars'); // Ensure arrow icon
+            sidebarToggle.querySelector('i').classList.add('fa-angle-left');
+            // Set initial desktop collapsed state if desired, or leave expanded
+            // sidebar.classList.add('collapsed');
+            // mainContent.classList.add('collapsed');
         }
     }
 
     setupSidebarState(); // Call on initial load
 
-    // Event listener for desktop sidebar toggle
-    desktopSidebarToggle.addEventListener('click', () => {
-        if (!isMobileView()) {
-            sidebar.classList.toggle('collapsed');
-            mainContent.classList.toggle('collapsed');
-            if (!sidebar.classList.contains('collapsed')) {
-                animateNavText();
-            }
-        }
-    });
-
-    // Event listener for mobile sidebar toggle
-    mobileSidebarToggle.addEventListener('click', () => {
+    // Unified event listener for sidebar toggle
+    sidebarToggle.addEventListener('click', () => {
         if (isMobileView()) {
+            // Mobile behavior: sidebar as overlay
             sidebar.classList.toggle('active');
             overlay.classList.toggle('active');
             // Change icon based on sidebar state
             if (sidebar.classList.contains('active')) {
-                mobileSidebarToggle.querySelector('i').classList.remove('fa-times');
-                mobileSidebarToggle.querySelector('i').classList.add('fa-bars');
+                sidebarToggle.querySelector('i').classList.remove('fa-bars');
+                sidebarToggle.querySelector('i').classList.add('fa-times');
+            } else {
+                sidebarToggle.querySelector('i').classList.remove('fa-times');
+                sidebarToggle.querySelector('i').classList.add('fa-bars');
             }
         } else {
-                mobileSidebarToggle.querySelector('i').classList.remove('fa-times');
-                mobileSidebarToggle.querySelector('i').classList.add('fa-bars');
+            // Desktop behavior: sidebar collapses/expands
+            sidebar.classList.toggle('collapsed');
+            mainContent.classList.toggle('collapsed');
+            // Change icon based on sidebar state
+            if (sidebar.classList.contains('collapsed')) {
+                sidebarToggle.querySelector('i').classList.remove('fa-angle-left');
+                sidebarToggle.querySelector('i').classList.add('fa-angle-right');
+            } else {
+                sidebarToggle.querySelector('i').classList.remove('fa-angle-right');
+                sidebarToggle.querySelector('i').classList.add('fa-angle-left');
+            }
+            if (!sidebar.classList.contains('collapsed')) {
+                animateNavText();
             }
         }
     });
@@ -104,9 +109,8 @@ document.addEventListener('DOMContentLoaded', () => {
         if (isMobileView() && sidebar.classList.contains('active')) {
             sidebar.classList.remove('active');
             overlay.classList.remove('active');
-            // Change icon back to bars when sidebar closes
-            mobileSidebarToggle.querySelector('i').classList.remove('fa-times');
-            mobileSidebarToggle.querySelector('i').classList.add('fa-bars');
+            sidebarToggle.querySelector('i').classList.remove('fa-times');
+            sidebarToggle.querySelector('i').classList.add('fa-bars');
         }
     });
 

frontend/style.css

@@ -29,7 +29,7 @@ body {
     top: 0;
     left: 0;
     padding: 1.5rem;
-    transition: width 0.3s ease;
+    transition: width 0.3s ease, transform 0.3s ease;
     z-index: 10;
     box-shadow: 2px 0 10px rgba(0,0,0,0.1);
 }
@@ -53,22 +53,50 @@ body {
     transition: opacity 0.3s ease;
 }
 
-/* Desktop sidebar toggle */
-#desktop-sidebar-toggle {
+.sidebar.collapsed .sidebar-header h2 {
+    opacity: 0;
+}
+
+/* Unified sidebar toggle button */
+#sidebar-toggle {
     background: transparent;
     border: none;
     color: var(--text-color-light);
     font-size: 1.2rem;
     cursor: pointer;
     transition: transform 0.3s ease;
+    position: fixed; /* Fixed position for both desktop and mobile */
+    top: 1rem;
+    left: 1rem;
+    z-index: 1001; /* Ensure it's above other content */
+    background-color: var(--primary-color);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
 }
 
-#desktop-sidebar-toggle:hover {
+#sidebar-toggle:hover {
     color: var(--hover-color);
 }
 
-.sidebar.collapsed #desktop-sidebar-toggle {
-    transform: rotate(180deg);
+/* Desktop specific toggle behavior */
+@media (min-width: 769px) {
+    #sidebar-toggle {
+        position: absolute; /* Position relative to sidebar on desktop */
+        top: 1.5rem;
+        right: 1.5rem;
+        left: auto; /* Reset left position */
+        background: transparent; /* Reset background */
+        box-shadow: none; /* Reset shadow */
+    }
+
+    .sidebar.collapsed #sidebar-toggle {
+        transform: rotate(180deg);
+    }
 }
 
 .sidebar-nav {
@@ -309,24 +337,6 @@ button:hover {
     animation: none;
 }
 
-/* Mobile toggle button (hamburger) */
-#mobile-sidebar-toggle {
-    display: none; /* Hidden by default on desktop */
-    position: fixed;
-    top: 1rem;
-    left: 1rem;
-    z-index: 1001; /* Ensure it's above other content */
-    background-color: var(--primary-color);
-    color: var(--text-color-light);
-    border-radius: 50%;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
-}
-
 /* Overlay for when sidebar is active */
 .overlay {
     display: none;
@@ -345,12 +355,14 @@ button:hover {
 
 /* Responsive adjustments for smaller screens */
 @media (max-width: 768px) {
+    /* Hide desktop toggle on mobile */
     #desktop-sidebar-toggle {
-        display: none; /* Hide desktop toggle on mobile */
+        display: none;
     }
 
-    #mobile-sidebar-toggle {
-        display: flex; /* Show mobile toggle */
+    /* Show mobile toggle */
+    #sidebar-toggle {
+        display: flex; 
     }
 
     .app-layout {