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

frontend/index.html

@@ -22,6 +22,8 @@
             </nav>
         </aside>
         <main class="main-content">
+            <button id="mobile-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">
                     <div class="card">

frontend/main.js

@@ -3,7 +3,9 @@ document.addEventListener('DOMContentLoaded', () => {
     const pages = document.querySelectorAll('.page');
     const sidebar = document.querySelector('.sidebar');
     const mainContent = document.querySelector('.main-content');
-    const sidebarToggle = document.getElementById('sidebar-toggle');
+    const desktopSidebarToggle = document.getElementById('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');
 
     function animateNavText() {
@@ -30,6 +32,12 @@ document.addEventListener('DOMContentLoaded', () => {
 
             document.getElementById(pageId).classList.add('active');
             link.classList.add('active');
+
+            // Close sidebar on mobile after navigation
+            if (isMobileView()) {
+                sidebar.classList.remove('active');
+                overlay.classList.remove('active');
+            }
         });
     });
 
@@ -39,41 +47,53 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     // Initial setup for sidebar based on screen size
-    if (isMobileView()) {
-        sidebar.classList.add('collapsed'); // Start collapsed on mobile
-        mainContent.classList.remove('collapsed'); // Main content always full width on mobile
-    } else {
-        // Desktop default state (can be adjusted if you want it collapsed by default)
-        sidebar.classList.remove('collapsed');
-        mainContent.classList.remove('collapsed');
-    }
-
-    sidebarToggle.addEventListener('click', () => {
+    function setupSidebarState() {
         if (isMobileView()) {
-            sidebar.classList.toggle('active'); // Use 'active' for mobile slide-in
-            // mainContent does not toggle 'collapsed' on mobile
+            sidebar.classList.remove('collapsed'); // Ensure desktop collapsed state is removed
+            sidebar.classList.remove('active'); // Start hidden on mobile
+            overlay.classList.remove('active');
+            mainContent.classList.remove('collapsed'); // Main content always full width on mobile
         } 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');
+        }
+    }
+
+    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') && !isMobileView()) {
-            animateNavText();
+            if (!sidebar.classList.contains('collapsed')) {
+                animateNavText();
+            }
         }
     });
 
-    // Adjust sidebar on window resize
-    window.addEventListener('resize', () => {
+    // Event listener for mobile sidebar toggle
+    mobileSidebarToggle.addEventListener('click', () => {
         if (isMobileView()) {
-            sidebar.classList.add('collapsed');
-            sidebar.classList.remove('active');
-            mainContent.classList.remove('collapsed');
-        } else {
-            sidebar.classList.remove('collapsed');
+            sidebar.classList.toggle('active');
+            overlay.classList.toggle('active');
+        }
+    });
+
+    // Event listener for overlay click (to close sidebar on mobile)
+    overlay.addEventListener('click', () => {
+        if (isMobileView() && sidebar.classList.contains('active')) {
             sidebar.classList.remove('active');
-            mainContent.classList.remove('collapsed');
+            overlay.classList.remove('active');
         }
     });
 
+    // Adjust sidebar on window resize
+    window.addEventListener('resize', setupSidebarState);
+
     function formatAIResponse(text) {
         text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1<\/strong>');
         text = text.replace(/^\d+\.\s+(.*)/gm, '<li>$1<\/li>');

frontend/style.css

@@ -312,8 +312,46 @@ button:hover {
     animation: none;
 }
 
+/* New styles for mobile toggle button */
+.mobile-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;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999; /* Below sidebar, above content */
+}
+
+.overlay.active {
+    display: block;
+}
+
 /* Responsive adjustments for smaller screens */
 @media (max-width: 768px) {
+    .mobile-toggle {
+        display: flex; /* Show on mobile */
+    }
+
     .app-layout {
         flex-direction: column;
         height: auto; /* Allow content to dictate height */
@@ -321,7 +359,7 @@ button:hover {
     }
 
     .sidebar {
-        width: 100%;
+        width: 250px; /* Slightly narrower sidebar for mobile */
         height: 100vh; /* Full viewport height */
         position: fixed; /* Keep it fixed for overlay effect */
         top: 0;
@@ -340,7 +378,7 @@ button:hover {
 
     .sidebar.collapsed {
         /* On mobile, 'collapsed' means hidden, so it's the same as default hidden state */
-        width: 100%;
+        width: 250px;
         transform: translateX(-100%);
     }
 
@@ -353,16 +391,7 @@ button:hover {
     }
 
     #sidebar-toggle {
-        display: block; /* Ensure toggle is visible */
-        position: absolute; /* Position relative to sidebar */
-        right: 1rem;
-        top: 1rem;
-        color: var(--text-color-light);
-        z-index: 1001; /* Ensure toggle is clickable */
-    }
-
-    .sidebar.active #sidebar-toggle {
-        transform: rotate(180deg); /* Rotate when active */
+        display: none; /* Hide the internal sidebar toggle on mobile */
     }
 
     .sidebar-nav .nav-link .nav-text {