Implement responsive design for mobile screens

frontend/main.js

@@ -33,14 +33,47 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 
+    // Function to check if it's a mobile view
+    function isMobileView() {
+        return window.innerWidth <= 768;
+    }
+
+    // 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', () => {
-        sidebar.classList.toggle('collapsed');
-        mainContent.classList.toggle('collapsed');
-        if (!sidebar.classList.contains('collapsed')) {
+        if (isMobileView()) {
+            sidebar.classList.toggle('active'); // Use 'active' for mobile slide-in
+            // mainContent does not toggle 'collapsed' on mobile
+        } else {
+            sidebar.classList.toggle('collapsed');
+            mainContent.classList.toggle('collapsed');
+        }
+        if (!sidebar.classList.contains('collapsed') && !isMobileView()) {
             animateNavText();
         }
     });
 
+    // Adjust sidebar on window resize
+    window.addEventListener('resize', () => {
+        if (isMobileView()) {
+            sidebar.classList.add('collapsed');
+            sidebar.classList.remove('active');
+            mainContent.classList.remove('collapsed');
+        } else {
+            sidebar.classList.remove('collapsed');
+            sidebar.classList.remove('active');
+            mainContent.classList.remove('collapsed');
+        }
+    });
+
     function formatAIResponse(text) {
         text = text.replace(/\*\*(.*?)\*\*/g, '<strong>$1<\/strong>');
         text = text.replace(/^\d+\.\s+(.*)/gm, '<li>$1<\/li>');

frontend/style.css

@@ -310,4 +310,91 @@ button:hover {
 
 .sidebar.collapsed .nav-text {
     animation: none;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+    .app-layout {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        width: 100%;
+        height: auto;
+        position: relative; /* Change from fixed to relative */
+        padding: 1rem;
+        box-shadow: none;
+        transform: translateX(-100%); /* Hide sidebar by default */
+        transition: transform 0.3s ease;
+    }
+
+    .sidebar.active {
+        transform: translateX(0);
+    }
+
+    .sidebar.collapsed {
+        width: 100%;
+        transform: translateX(-100%);
+    }
+
+    .sidebar-header {
+        margin-bottom: 1rem;
+    }
+
+    .sidebar-header h2 {
+        opacity: 1; /* Always show title on mobile */
+    }
+
+    #sidebar-toggle {
+        display: block; /* Ensure toggle is visible */
+        transform: rotate(0deg) !important; /* Reset rotation */
+    }
+
+    .sidebar.active #sidebar-toggle {
+        transform: rotate(180deg) !important; /* Rotate when active */
+    }
+
+    .sidebar-nav .nav-link .nav-text {
+        opacity: 1; /* Always show text on mobile */
+        width: auto;
+        overflow: visible;
+    }
+
+    .sidebar-nav .nav-link {
+        justify-content: flex-start;
+    }
+
+    .main-content {
+        margin-left: 0; /* Remove left margin */
+        width: 100%; /* Take full width */
+        padding: 1rem; /* Adjust padding */
+        overflow-y: auto; /* Ensure scrolling */
+    }
+
+    .main-content.collapsed {
+        margin-left: 0;
+        width: 100%;
+    }
+
+    .container {
+        padding: 1rem; /* Adjust container padding */
+    }
+
+    .card {
+        padding: 1.5rem; /* Adjust card padding */
+    }
+
+    /* Adjust font sizes for better mobile readability */
+    body {
+        font-size: 0.9rem;
+    }
+
+    .card h2 {
+        font-size: 1.5rem;
+    }
+
+    select, input[type="text"], button {
+        padding: 0.8rem;
+        font-size: 0.9rem;
+    }
 }