Fix mobile navigation: visible toggle, overlay, and correct sidebar behavior

frontend/index.html

@@ -12,7 +12,6 @@
         <aside class="sidebar">
             <div class="sidebar-header">
                 <h2>AutoML</h2>
-                <button id="sidebar-toggle"><i class="fas fa-bars"></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>

frontend/main.js

@@ -37,6 +37,9 @@ document.addEventListener('DOMContentLoaded', () => {
             if (isMobileView()) {
                 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');
             }
         });
     });
@@ -53,12 +56,16 @@ 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
         } 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
         }
     }
 
@@ -80,6 +87,14 @@ document.addEventListener('DOMContentLoaded', () => {
         if (isMobileView()) {
             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-bars');
+                mobileSidebarToggle.querySelector('i').classList.add('fa-times');
+            } else {
+                mobileSidebarToggle.querySelector('i').classList.remove('fa-times');
+                mobileSidebarToggle.querySelector('i').classList.add('fa-bars');
+            }
         }
     });
 
@@ -88,6 +103,9 @@ 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');
         }
     });