Merge pull request 'Fix theme toggle and improve mobile sidebar' (#11) from fix/theme-and-mobile-sidebar into master

Reviewed-on: #11
Reviewed-by: rafaga21 <rafaelminaya20@hotmail.com>

public/assets/css/style.css

@@ -1,8 +1,9 @@
 /* ==========================================================================
-   ServerManager - Dark Theme Dashboard Stylesheet
+   ServerManager - Theme Variables
    ========================================================================== */
 
-:root {
+:root,
+[data-theme="dark"] {
     --bg-primary: #0f1117;
     --bg-secondary: #161822;
     --bg-tertiary: #1c1f2e;
@@ -50,6 +51,41 @@
     --transition: 0.2s ease;
 }
 
+[data-theme="light"] {
+    --bg-primary: #f8f9fc;
+    --bg-secondary: #ffffff;
+    --bg-tertiary: #f0f1f5;
+    --bg-card: #ffffff;
+    --bg-hover: #eef0f4;
+    --bg-input: #ffffff;
+
+    --border-color: #d1d5db;
+    --border-light: #e5e7eb;
+
+    --text-primary: #111827;
+    --text-secondary: #4b5563;
+    --text-muted: #9ca3af;
+
+    --accent: #4f46e5;
+    --accent-hover: #6366f1;
+    --accent-light: rgba(79, 70, 229, 0.08);
+
+    --success: #16a34a;
+    --success-bg: rgba(22, 163, 74, 0.08);
+    --warning: #d97706;
+    --warning-bg: rgba(217, 119, 6, 0.08);
+    --danger: #dc2626;
+    --danger-bg: rgba(220, 38, 38, 0.08);
+    --info: #2563eb;
+    --info-bg: rgba(37, 99, 235, 0.08);
+    --purple: #7c3aed;
+    --purple-bg: rgba(124, 58, 237, 0.08);
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+    --shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
+    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
+}
+
 *, *::before, *::after {
     margin: 0;
     padding: 0;
@@ -345,9 +381,21 @@ code, pre {
     background: none;
     border: none;
     color: var(--text-secondary);
-    font-size: 1.2rem;
+    font-size: 1.3rem;
     cursor: pointer;
-    padding: 0.25rem;
+    padding: 0.6rem;
+    margin: -0.3rem;
+    border-radius: var(--radius-sm);
+    transition: color var(--transition);
+}
+
+.mobile-toggle:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+}
+
+.mobile-overlay {
+    display: none;
 }
 
 .breadcrumb {
@@ -2270,10 +2318,40 @@ textarea.form-input {
 @media (max-width: 768px) {
     .sidebar {
         transform: translateX(-100%);
+        width: 280px;
+        box-shadow: none;
+        overflow-y: auto;
     }
 
     .sidebar.mobile-open {
         transform: translateX(0);
+        box-shadow: 4px 0 20px rgba(0,0,0,0.4);
+    }
+
+    .sidebar.mobile-open.collapsed {
+        width: 280px;
+    }
+
+    .sidebar.mobile-open.collapsed .logo-text,
+    .sidebar.mobile-open.collapsed .nav-link span,
+    .sidebar.mobile-open.collapsed .nav-section,
+    .sidebar.mobile-open.collapsed .user-details,
+    .sidebar.mobile-open.collapsed .user-menu,
+    .sidebar.mobile-open.collapsed .nav-divider {
+        display: flex;
+    }
+
+    .sidebar.mobile-open.collapsed .sidebar-logo {
+        justify-content: flex-start;
+    }
+
+    .sidebar.mobile-open.collapsed .nav-link {
+        justify-content: flex-start;
+        padding: 0.65rem 1.25rem;
+    }
+
+    .sidebar.mobile-open.collapsed .user-info {
+        justify-content: flex-start;
     }
 
     .main-content {
@@ -2284,6 +2362,18 @@ textarea.form-input {
         display: block;
     }
 
+    .mobile-overlay {
+        display: none;
+        position: fixed;
+        inset: 0;
+        background: rgba(0,0,0,0.5);
+        z-index: 99;
+    }
+
+    .mobile-overlay.active {
+        display: block;
+    }
+
     .content-area {
         padding: 1rem;
     }
@@ -2315,6 +2405,10 @@ textarea.form-input {
     .terminal-prompt {
         display: none;
     }
+
+    .nav-submenu {
+        background: rgba(0,0,0,0.1);
+    }
 }
 
 @media (max-width: 480px) {

public/assets/js/app.js

@@ -13,32 +13,55 @@
     const sidebar = document.getElementById('sidebar');
     const sidebarToggle = document.getElementById('sidebarToggle');
     const mobileToggle = document.getElementById('mobileToggle');
+    const mobileOverlay = document.getElementById('mobileOverlay');
 
-    if (sidebarToggle) {
+    function closeMobileSidebar() {
+        if (!sidebar) return;
+        sidebar.classList.remove('mobile-open');
+        if (mobileOverlay) mobileOverlay.classList.remove('active');
+    }
+
+    if (sidebarToggle && sidebar) {
         sidebarToggle.addEventListener('click', function () {
             const isCollapsed = sidebar.classList.toggle('collapsed');
-            localStorage.setItem('sidebar_collapsed', isCollapsed ? '1' : '0');
+            try { localStorage.setItem('sidebar_collapsed', isCollapsed ? '1' : '0'); } catch (e) {}
         });
 
-        if (localStorage.getItem('sidebar_collapsed') === '1') {
-            sidebar.classList.add('collapsed');
-        }
+        try {
+            if (window.innerWidth > 768 && localStorage.getItem('sidebar_collapsed') === '1') {
+                sidebar.classList.add('collapsed');
+            }
+        } catch (e) {}
     }
 
-    if (mobileToggle) {
+    if (mobileToggle && sidebar) {
         mobileToggle.addEventListener('click', function () {
-            sidebar.classList.toggle('mobile-open');
+            const opening = !sidebar.classList.contains('mobile-open');
+            if (opening) {
+                sidebar.classList.remove('collapsed');
+                sidebar.classList.add('mobile-open');
+                if (mobileOverlay) mobileOverlay.classList.add('active');
+            } else {
+                closeMobileSidebar();
+            }
         });
     }
 
-    document.addEventListener('click', function (e) {
-        if (window.innerWidth <= 768 &&
-            sidebar.classList.contains('mobile-open') &&
-            !sidebar.contains(e.target) &&
-            e.target !== mobileToggle) {
-            sidebar.classList.remove('mobile-open');
-        }
-    });
+    if (sidebar) {
+        document.addEventListener('click', function (e) {
+            if (window.innerWidth <= 768 &&
+                sidebar.classList.contains('mobile-open') &&
+                !sidebar.contains(e.target) &&
+                e.target !== mobileToggle &&
+                e.target !== mobileOverlay) {
+                closeMobileSidebar();
+            }
+        });
+    }
+
+    if (mobileOverlay) {
+        mobileOverlay.addEventListener('click', closeMobileSidebar);
+    }
 
     /* ==========================================================================
        Theme Toggle

views/layouts/main.php

@@ -95,6 +95,8 @@
             </div>
         </aside>
 
+        <div class="mobile-overlay" id="mobileOverlay"></div>
+
         <main class="main-content">
             <header class="top-bar">
                 <div class="top-bar-left">