fix: mobile responsive admin panel

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,
+    .sidebar.open {
-    .nav-item span,
+        transform: translateX(0);
-    .btn-logout span {
+    }
-        display: none;
+
+    .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;
     }
 }

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: 'Администратор',

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>