mobile settings for base template

static/css/base.css

@@ -18,6 +18,50 @@ body {
     top: 56px; /* Height of the navbar */
     height: calc(100vh - 56px);
     overflow-y: auto;
+    transition: transform 0.3s ease-in-out;
+}
+
+/* Mobile sidebar styles */
+@media (max-width: 767.98px) {
+    .sidebar {
+        position: fixed;
+        left: 0;
+        top: 56px;
+        width: 280px;
+        transform: translateX(-100%);
+        z-index: 1040;
+    }
+
+    .sidebar.show {
+        transform: translateX(0);
+    }
+
+    .sidebar-overlay {
+        position: fixed;
+        top: 56px;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1035;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.3s ease-in-out;
+    }
+
+    .sidebar-overlay.show {
+        opacity: 1;
+        visibility: visible;
+    }
+
+    body.sidebar-open {
+        overflow: hidden;
+    }
+
+    .main-content {
+        width: 100%;
+        margin-left: 0;
+    }
 }
 
 .sidebar .nav-link {