05/24 Fix UI/UX

static/css/style.css

@@ -694,6 +694,14 @@ textarea{resize:vertical;min-height:88px}
   .sidebar-footer{align-items:center}
   .main-content{padding:1.1rem .9rem 2rem}
 }
+/* Hamburger button — hidden on desktop */
+.sidebar-toggle{display:none}
+/* Backdrop — always hidden until .open is added */
+.sidebar-backdrop{
+  display:none;position:fixed;inset:0;
+  background:rgba(0,0,0,.45);z-index:199;
+}
+
 @media(max-width:700px){
   .sc-actions{flex-direction:column;align-items:flex-start}
   .sc-url{display:none}
@@ -702,6 +710,33 @@ textarea{resize:vertical;min-height:88px}
   .filter-bar{flex-direction:column}
   .credential-entry{grid-template-columns:1fr 1fr}
   .page-header{flex-direction:column;align-items:flex-start}
+
+  /* ── Mobile sidebar ──────────────────────────────────── */
+  .sidebar{
+    width:240px;
+    transform:translateX(-240px);
+    transition:transform .25s ease;
+  }
+  .sidebar.open{transform:translateX(0)}
+  /* Restore full labels when sidebar slides in */
+  .sidebar.open .brand-name,
+  .sidebar.open .nav-group-label,
+  .sidebar.open .user-info,
+  .sidebar.open .sidebar-btn{display:block}
+  .sidebar.open .sidebar-brand{justify-content:flex-start;padding:1.1rem 1rem .9rem}
+  .sidebar.open .brand-icon{margin:0}
+  .sidebar.open .nav-item{justify-content:flex-start;padding:.65rem 1rem;gap:.6rem}
+  .sidebar.open .sidebar-footer{align-items:stretch}
+
+  .sidebar-backdrop.open{display:block}
+  .sidebar-toggle{
+    display:flex;align-items:center;justify-content:center;
+    position:fixed;top:.75rem;left:.75rem;z-index:201;
+    background:var(--bg-white);border:1px solid var(--border-strong);
+    border-radius:var(--r-sm);width:2.25rem;height:2.25rem;
+    font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow-sm);
+  }
+  .main-content{margin-left:0;padding-top:3.5rem}
 }
 
 /* ══════════════════════════════════════════════════════════