сделал кнопку настроек, вкладку настроек и сворачивание боковой панели

frontend/admin/css/layout.css

@@ -19,6 +19,27 @@
 .sidebar-header {
     padding: 1.25rem;
     border-bottom: 1px solid var(--bg-card-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.sidebar-close-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    border-radius: var(--radius-sm);
+    transition: all var(--transition);
+}
+
+.sidebar-close-btn:hover {
+    background: var(--bg-card-border);
+    color: var(--text-primary);
 }
 
 .logo {
@@ -99,7 +120,7 @@
     border-top: 1px solid var(--bg-card-border);
 }
 
-.btn-logout {
+.btn-settings {
     width: 100%;
     display: flex;
     align-items: center;
@@ -116,16 +137,110 @@
     position: relative;
 }
 
-.btn-logout:hover {
-    background: rgba(248, 113, 113, 0.1);
+.btn-settings:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+}
+
+.settings-chevron {
+    margin-left: auto;
+    transition: transform 0.3s ease;
+    flex-shrink: 0;
+}
+
+.settings-dropdown.open .settings-chevron {
+    transform: rotate(180deg);
+}
+
+/* Settings Dropdown Menu */
+.settings-dropdown {
+    position: relative;
+}
+
+.settings-menu {
+    position: absolute;
+    bottom: calc(100% + 0.5rem);
+    left: 0;
+    right: 0;
+    background: rgba(15, 23, 42, 0.97);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid var(--bg-card-border);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
+    padding: 0.4rem;
+    z-index: 200;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(8px);
+    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
+}
+
+[data-theme="light"] .settings-menu {
+    background: rgba(255, 255, 255, 0.98);
+    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
+}
+
+.settings-dropdown.open .settings-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.settings-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 0.6rem 0.75rem;
+    border: none;
+    border-radius: 8px;
+    background: none;
+    color: var(--text-primary);
+    font-family: inherit;
+    font-size: 0.88rem;
+    cursor: pointer;
+    text-decoration: none;
+    transition: background 0.2s ease;
+    width: 100%;
+}
+
+.settings-menu-item:hover {
+    background: var(--bg-hover);
+}
+
+.settings-menu-item--danger {
     color: var(--error);
 }
 
+.settings-menu-item--danger:hover {
+    background: rgba(248, 113, 113, 0.1);
+}
+
+.settings-menu-divider {
+    height: 1px;
+    background: var(--bg-card-border);
+    margin: 0.25rem 0.5rem;
+}
+
 /* ===== Main ===== */
 .main {
     flex: 1;
     margin-left: 260px;
     min-height: 100vh;
+    transition: margin-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* Desktop Collapse State */
+@media (min-width: 769px) {
+    .sidebar.collapsed {
+        transform: translateX(-100%);
+    }
+    .main.sidebar-collapsed {
+        margin-left: 0;
+    }
+    .main.sidebar-collapsed .menu-toggle {
+        display: block;
+    }
 }
 
 .topbar {
@@ -180,7 +295,9 @@
     backdrop-filter: blur(2px);
     z-index: 9;
     opacity: 0;
-    transition: opacity var(--transition);
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity var(--transition), visibility var(--transition);
 }
 
 /* ===== Responsive Mobile ===== */
@@ -212,5 +329,7 @@
 
     .sidebar-overlay.open {
         opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
     }
 }