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

frontend/index.html

@@ -12,6 +12,7 @@
         <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>

frontend/main.js

@@ -3,7 +3,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const pages = document.querySelectorAll('.page');
     const sidebar = document.querySelector('.sidebar');
     const mainContent = document.querySelector('.main-content');
-    const desktopSidebarToggle = document.getElementById('sidebar-toggle'); // Original desktop toggle
+    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 loader = document.querySelector('.loader');

frontend/style.css

@@ -53,11 +53,8 @@ body {
     transition: opacity 0.3s ease;
 }
 
-.sidebar.collapsed .sidebar-header h2 {
-    opacity: 0;
-}
-
-#sidebar-toggle {
+/* Desktop sidebar toggle */
+#desktop-sidebar-toggle {
     background: transparent;
     border: none;
     color: var(--text-color-light);
@@ -66,11 +63,11 @@ body {
     transition: transform 0.3s ease;
 }
 
-#sidebar-toggle:hover {
+#desktop-sidebar-toggle:hover {
     color: var(--hover-color);
 }
 
-.sidebar.collapsed #sidebar-toggle {
+.sidebar.collapsed #desktop-sidebar-toggle {
     transform: rotate(180deg);
 }
 
@@ -312,8 +309,8 @@ button:hover {
     animation: none;
 }
 
-/* New styles for mobile toggle button */
-.mobile-toggle {
+/* Mobile toggle button (hamburger) */
+#mobile-sidebar-toggle {
     display: none; /* Hidden by default on desktop */
     position: fixed;
     top: 1rem;
@@ -348,8 +345,12 @@ button:hover {
 
 /* Responsive adjustments for smaller screens */
 @media (max-width: 768px) {
-    .mobile-toggle {
-        display: flex; /* Show on mobile */
+    #desktop-sidebar-toggle {
+        display: none; /* Hide desktop toggle on mobile */
+    }
+
+    #mobile-sidebar-toggle {
+        display: flex; /* Show mobile toggle */
     }
 
     .app-layout {
@@ -390,10 +391,6 @@ button:hover {
         opacity: 1; /* Always show title on mobile */
     }
 
-    #sidebar-toggle {
-        display: none; /* Hide the internal sidebar toggle on mobile */
-    }
-
     .sidebar-nav .nav-link .nav-text {
         opacity: 1; /* Always show text on mobile */
         width: auto;
@@ -421,6 +418,9 @@ button:hover {
 
     .container {
         padding: 1rem; /* Adjust container padding */
+        /* Center the card horizontally */
+        justify-content: center;
+        align-items: flex-start; /* Align items to start to prevent vertical centering issues */
     }
 
     .page {
@@ -429,6 +429,8 @@ button:hover {
 
     .card {
         padding: 1.5rem; /* Adjust card padding */
+        width: 95%; /* Give it a max width to prevent stretching */
+        box-sizing: border-box; /* Include padding in width */
     }
 
     /* Adjust font sizes for better mobile readability */