fix: mobile sidebar with hamburger toggle

static/css/main.css

@@ -707,7 +707,16 @@ code {
     }
 
     .sidebar {
-        display: none;
+        position: fixed;
+        left: 0; top: 0;
+        width: var(--sidebar-width);
+        height: 100vh;
+        z-index: 200;
+        transform: translateX(-100%);
+        transition: transform .3s ease;
+    }
+    .sidebar.mobile-open {
+        transform: translateX(0);
     }
 
     .main-content {
@@ -718,6 +727,9 @@ code {
         height: 48px;
         padding: 0 12px;
     }
+    #mobile-menu-btn {
+        display: flex !important;
+    }
     .topbar-logo-title.hidden {
         opacity: 1;
         pointer-events: auto;

templates/index.html

@@ -72,6 +72,9 @@
         <main class="main-content">
             <header id="topbar" class="topbar">
                 <div class="topbar-left">
+                    <button id="mobile-menu-btn" class="icon-btn" style="display:none" onclick="document.getElementById('sidebar').classList.toggle('mobile-open')">
+                        <svg viewBox="0 0 24 24" width="22" height="22"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"/></svg>
+                    </button>
                     <div id="topbar-logo-title" class="topbar-logo-title hidden">
                         <img src="/static/img/logo.svg" alt="TurboSu" width="28" height="28">
                         <span class="topbar-title-text">TurboSu</span>