From 08ed6ebe36d00e87c2cd3d8f23ce2fe14bed98a4 Mon Sep 17 00:00:00 2001
From: Zuev <yegorzuev@gmail.com>
Date: Sat, 14 Feb 2026 02:20:01 +0300
Subject: [PATCH] fix: mobile responsive admin panel

---
 frontend/admin/admin.css  | 103 +++++++++++++++++++++++++++++++++++---
 frontend/admin/admin.js   |  12 +++++
 frontend/admin/index.html |  11 ++++
 3 files changed, 120 insertions(+), 6 deletions(-)

diff --git a/frontend/admin/admin.css b/frontend/admin/admin.css
index a47a8fb..3336fb5 100644
--- a/frontend/admin/admin.css
+++ b/frontend/admin/admin.css
@@ -356,27 +356,118 @@ tbody tr:hover {
     background: rgba(248, 113, 113, 0.2);
 }
 
+/* ===== Mobile Menu Toggle ===== */
+.menu-toggle {
+    display: none;
+    padding: 0.4rem;
+    background: none;
+    border: none;
+    color: var(--text-primary);
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: background var(--transition);
+}
+
+.menu-toggle:hover {
+    background: var(--bg-hover);
+}
+
+/* ===== Sidebar Overlay ===== */
+.sidebar-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 9;
+    backdrop-filter: blur(2px);
+}
+
 /* ===== Responsive ===== */
 @media (max-width: 768px) {
     .sidebar {
-        width: 60px;
+        width: 240px;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+        z-index: 20;
     }
 
-    .sidebar-header span,
-    .nav-item span,
-    .btn-logout span {
-        display: none;
+    .sidebar.open {
+        transform: translateX(0);
+    }
+
+    .sidebar-overlay.open {
+        display: block;
+    }
+
+    .menu-toggle {
+        display: flex;
     }
 
     .main {
-        margin-left: 60px;
+        margin-left: 0;
+    }
+
+    .topbar {
+        padding: 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+    }
+
+    .topbar h1 {
+        font-size: 1.1rem;
     }
 
     .content {
         padding: 1rem;
     }
 
+    .card {
+        padding: 1rem;
+    }
+
     .form-row {
         flex-direction: column;
+        align-items: stretch;
+    }
+
+    .form-row .form-group {
+        min-width: 0;
+    }
+
+    .btn-create {
+        width: 100%;
+        text-align: center;
+    }
+
+    tbody td {
+        padding: 0.5rem 0.6rem;
+        font-size: 0.82rem;
+    }
+
+    thead th {
+        padding: 0.5rem 0.6rem;
+        font-size: 0.72rem;
+    }
+
+    .table-wrap {
+        margin: 0 -1rem;
+        padding: 0 1rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .topbar h1 {
+        font-size: 0.95rem;
+    }
+
+    .badge {
+        font-size: 0.65rem;
+        padding: 0.15rem 0.45rem;
+    }
+
+    .btn-delete {
+        padding: 0.25rem 0.5rem;
+        font-size: 0.72rem;
     }
 }
\ No newline at end of file
diff --git a/frontend/admin/admin.js b/frontend/admin/admin.js
index 16caffc..1369d76 100644
--- a/frontend/admin/admin.js
+++ b/frontend/admin/admin.js
@@ -13,6 +13,18 @@
     const createForm = document.getElementById('create-form');
     const createAlert = document.getElementById('create-alert');
     const btnLogout = document.getElementById('btn-logout');
+    const menuToggle = document.getElementById('menu-toggle');
+    const sidebar = document.querySelector('.sidebar');
+    const sidebarOverlay = document.getElementById('sidebar-overlay');
+
+    // ---- Mobile Menu ----
+    function toggleSidebar() {
+        sidebar.classList.toggle('open');
+        sidebarOverlay.classList.toggle('open');
+    }
+
+    menuToggle.addEventListener('click', toggleSidebar);
+    sidebarOverlay.addEventListener('click', toggleSidebar);
 
     const ROLE_LABELS = {
         ADMIN: 'Администратор',
diff --git a/frontend/admin/index.html b/frontend/admin/index.html
index 8ceae50..8cdada3 100644
--- a/frontend/admin/index.html
+++ b/frontend/admin/index.html
@@ -55,9 +55,20 @@
         </div>
     </aside>
 
+    <!-- Sidebar overlay (mobile) -->
+    <div class="sidebar-overlay" id="sidebar-overlay"></div>
+
     <!-- Main -->
     <main class="main">
         <header class="topbar">
+            <button class="menu-toggle" id="menu-toggle" aria-label="Меню">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                    stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="3" y1="6" x2="21" y2="6" />
+                    <line x1="3" y1="12" x2="21" y2="12" />
+                    <line x1="3" y1="18" x2="21" y2="18" />
+                </svg>
+            </button>
             <h1>Управление пользователями</h1>
         </header>