Add left sidebar toggle.

Author: m0ver

assets/css/style.css

@@ -1019,4 +1019,89 @@ footer {
         padding: 1rem;
         min-height: 200px;
     }
-}
+}
+
+/* Sidebar Toggle & Overlay */
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.menu-toggle {
+    display: flex; /* Always visible now */
+    background: rgba(255, 255, 255, 0.2);
+    border: none;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #fff;
+    backdrop-filter: blur(4px);
+    transition: background 0.2s;
+    font-size: 1.2rem;
+}
+
+.menu-toggle:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.sidebar-overlay {
+    position: fixed;
+    top: 0; 
+    left: 0;
+    right: 0; 
+    bottom: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 999;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+    backdrop-filter: blur(2px);
+}
+
+/* Desktop Styles (Default) */
+.sidebar {
+    transition: transform 0.3s ease;
+}
+
+.main-content {
+    transition: margin-left 0.3s ease;
+}
+
+/* Desktop Closed State */
+body.sidebar-closed .sidebar {
+    transform: translateX(-100%);
+}
+
+body.sidebar-closed .main-content {
+    margin-left: 0;
+}
+
+/* Mobile Styles */
+@media (max-width: 768px) {
+    .sidebar {
+        display: flex !important;
+        transform: translateX(-100%); /* Default hidden on mobile */
+        z-index: 1000;
+    }
+    
+    /* Mobile Open State */
+    body.sidebar-open .sidebar {
+        transform: translateX(0);
+        box-shadow: 2px 0 10px rgba(0,0,0,0.5);
+    }
+    
+    body.sidebar-open .sidebar-overlay {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+    
+    
+    
+    
+    
+    

index.html

@@ -69,13 +69,21 @@
         </div>
     </aside>
 
+    <!-- Sidebar Overlay -->
+    <div class="sidebar-overlay" onclick="toggleSidebar()"></div>
+
     <!-- Main Content Area -->
     <main class="main-content">
 
         <!-- Header / Hero -->
         <header class="main-header">
             <div class="header-top">
-                <div class="version-badge">v1.7.17</div>
+                <div class="header-left">
+                    <button class="menu-toggle" onclick="toggleSidebar()">
+                        <ion-icon name="menu-outline"></ion-icon>
+                    </button>
+                    <div class="version-badge">v1.7.17</div>
+                </div>
                 <div class="header-actions">
                     <button class="lang-switch" title="Switch Language" onclick="toggleLanguage()">
                         <span style="font-size: 0.8rem; font-weight: 700;">EN</span>
@@ -270,6 +278,22 @@ <h4>Zero Configuration</h4>
         document.documentElement.setAttribute('data-theme', savedTheme);
         updateThemeIcon(savedTheme);
 
+        // Sidebar Toggle Logic
+        function toggleSidebar() {
+            if (window.innerWidth < 768) {
+                document.body.classList.toggle('sidebar-open');
+                document.body.classList.remove('sidebar-closed'); // Reset desktop state just in case
+            } else {
+                document.body.classList.toggle('sidebar-closed');
+                document.body.classList.remove('sidebar-open'); // Reset mobile state just in case
+            }
+        }
+        
+        // Close sidebar when clicking overlay (Mobile only)
+        document.querySelector('.sidebar-overlay').addEventListener('click', function() {
+            document.body.classList.remove('sidebar-open');
+        });
+
         // Language Switcher (Mock implementation for demo)
         const translations = {
             'zh': {