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 {

templates/common/base.html

@@ -20,53 +20,50 @@
     <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-dark">
         <div class="container-fluid">
+            <button class="navbar-toggler border-0 me-2" type="button" id="sidebarToggle">
+                <i class="fas fa-bars text-white"></i>
+            </button>
             <a class="navbar-brand d-flex align-items-center" href="{{ url_for('main.dashboard') }}">
                 {% if site_settings.company_logo %}
                 <img src="{{ url_for('static', filename='uploads/company_logos/' + site_settings.company_logo) }}" 
                      alt="Company Logo" 
-                     style="height: 40px; margin-right: 10px;">
+                     style="height: 40px;">
-                {% endif %}
-                {% if site_settings.company_name %}
-                    DocuPulse for:{% if site_settings.company_website %}<a href="{{ site_settings.company_website }}" target="_blank" style="text-decoration: none; color: #fff !important; font-weight: inherit; font-size: 1.25rem; font-family: inherit; display: inline; padding: 0; margin: 0;">{{ site_settings.company_name }}</a>{% else %}{{ site_settings.company_name }}{% endif %}
-                {% else %}
-                    DocuPulse
                 {% endif %}
             </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+            <div class="d-flex align-items-center">
-                <span class="navbar-toggler-icon"></span>
+                <div class="d-none d-lg-flex align-items-center me-3">
-            </button>
+                    <a class="nav-link text-white" href="#">
-            <div class="collapse navbar-collapse" id="navbarNav">
+                        <i class="fas fa-bell text-xl" style="width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;"></i>
-                <ul class="navbar-nav ms-auto">
+                    </a>
-                    <li class="nav-item">
-                        <a class="nav-link flex items-center justify-center" href="#">
-                            <i class="fas fa-bell text-xl" style="width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;"></i>
-                        </a>
-                    </li>
                     {% if current_user.is_admin %}
-                    <li class="nav-item">
+                    <a class="nav-link text-white" href="{{ url_for('main.settings') }}">
-                        <a class="nav-link flex items-center justify-center" href="{{ url_for('main.settings') }}">
+                        <i class="fas fa-cog text-xl" style="width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;"></i>
-                            <i class="fas fa-cog text-xl" style="width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;"></i>
+                    </a>
-                        </a>
-                    </li>
                     {% endif %}
-                    <li class="nav-item dropdown">
+                </div>
-                        <a class="nav-link dropdown-toggle flex items-center gap-2" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
+                <div class="dropdown">
-                            <img src="{{ url_for('profile_pic', filename=current_user.profile_picture) if current_user.profile_picture else url_for('static', filename='default-avatar.png') }}"
+                    <a class="nav-link d-flex align-items-center gap-2 d-lg-none" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
-                                 alt="Profile Picture"
+                        <img src="{{ url_for('profile_pic', filename=current_user.profile_picture) if current_user.profile_picture else url_for('static', filename='default-avatar.png') }}"
-                                 class="w-8 h-8 rounded-full object-cover border-2 border-white shadow"
+                             alt="Profile Picture"
-                                 style="display: inline-block; vertical-align: middle;">
+                             class="w-8 h-8 rounded-full object-cover border-2 border-white shadow"
-                            <span class="text-white font-medium">{{ current_user.username }}</span>
+                             style="display: inline-block; vertical-align: middle;">
-                        </a>
+                    </a>
-                        <ul class="dropdown-menu dropdown-menu-end">
+                    <a class="nav-link dropdown-toggle d-flex align-items-center gap-2 d-none d-lg-flex" href="#" id="navbarDropdownDesktop" role="button" data-bs-toggle="dropdown">
-                            <li><a class="dropdown-item" href="{{ url_for('main.profile') }}"><i class="fas fa-user"></i> Profile</a></li>
+                        <img src="{{ url_for('profile_pic', filename=current_user.profile_picture) if current_user.profile_picture else url_for('static', filename='default-avatar.png') }}"
-                            {% if current_user.is_admin %}
+                             alt="Profile Picture"
-                            <li><a class="dropdown-item" href="{{ url_for('main.settings') }}"><i class="fas fa-cog"></i> Settings</a></li>
+                             class="w-8 h-8 rounded-full object-cover border-2 border-white shadow"
-                            {% endif %}
+                             style="display: inline-block; vertical-align: middle;">
-                            <li><hr class="dropdown-divider"></li>
+                        <span class="text-white font-medium">{{ current_user.username }}</span>
-                            <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
+                    </a>
-                        </ul>
+                    <ul class="dropdown-menu dropdown-menu-end">
-                    </li>
+                        <li><a class="dropdown-item" href="{{ url_for('main.profile') }}"><i class="fas fa-user"></i> Profile</a></li>
-                </ul>
+                        {% if current_user.is_admin %}
+                        <li><a class="dropdown-item" href="{{ url_for('main.settings') }}"><i class="fas fa-cog"></i> Settings</a></li>
+                        {% endif %}
+                        <li><hr class="dropdown-divider"></li>
+                        <li><a class="dropdown-item" href="{{ url_for('auth.logout') }}"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
+                    </ul>
+                </div>
             </div>
         </div>
     </nav>
@@ -74,7 +71,7 @@
     <div class="container-fluid">
         <div class="row">
             <!-- Sidebar -->
-            <div class="col-md-3 col-lg-2 px-0 sidebar">
+            <div class="col-md-3 col-lg-2 px-0 sidebar" id="sidebar">
                 <div class="p-3">
                     <ul class="nav flex-column">
                         <li class="nav-item">
@@ -109,6 +106,30 @@
                                 <i class="fas fa-trash"></i> Trash
                             </a>
                         </li>
+                        <!-- Mobile-only menu items -->
+                        <li class="nav-item d-lg-none">
+                            <hr class="my-2">
+                            <a class="nav-link" href="#">
+                                <i class="fas fa-bell"></i> Notifications
+                            </a>
+                        </li>
+                        {% if current_user.is_admin %}
+                        <li class="nav-item d-lg-none">
+                            <a class="nav-link" href="{{ url_for('main.settings') }}">
+                                <i class="fas fa-cog"></i> Settings
+                            </a>
+                        </li>
+                        {% endif %}
+                        <li class="nav-item d-lg-none">
+                            <a class="nav-link" href="{{ url_for('main.profile') }}">
+                                <i class="fas fa-user"></i> Profile
+                            </a>
+                        </li>
+                        <li class="nav-item d-lg-none">
+                            <a class="nav-link" href="{{ url_for('auth.logout') }}">
+                                <i class="fas fa-sign-out-alt"></i> Logout
+                            </a>
+                        </li>
                     </ul>
                 </div>
             </div>
@@ -120,7 +141,46 @@
         </div>
     </div>
 
+    <!-- Overlay for mobile sidebar -->
+    <div class="sidebar-overlay" id="sidebarOverlay"></div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const sidebar = document.getElementById('sidebar');
+            const sidebarToggle = document.getElementById('sidebarToggle');
+            const sidebarOverlay = document.getElementById('sidebarOverlay');
+            const mainContent = document.querySelector('.main-content');
+
+            function toggleSidebar() {
+                sidebar.classList.toggle('show');
+                sidebarOverlay.classList.toggle('show');
+                document.body.classList.toggle('sidebar-open');
+            }
+
+            sidebarToggle.addEventListener('click', toggleSidebar);
+            sidebarOverlay.addEventListener('click', toggleSidebar);
+
+            // Close sidebar when clicking a link on mobile
+            const sidebarLinks = sidebar.querySelectorAll('.nav-link');
+            sidebarLinks.forEach(link => {
+                link.addEventListener('click', () => {
+                    if (window.innerWidth < 768) {
+                        toggleSidebar();
+                    }
+                });
+            });
+
+            // Handle window resize
+            window.addEventListener('resize', () => {
+                if (window.innerWidth >= 768) {
+                    sidebar.classList.remove('show');
+                    sidebarOverlay.classList.remove('show');
+                    document.body.classList.remove('sidebar-open');
+                }
+            });
+        });
+    </script>
     {% block extra_js %}{% endblock %}
 </body>
 </html>