/** * Единый сайдбар (десктоп) / нижний бар (мобильная версия). * Используется только в layouts/main.php и layouts/guest.php — НЕ в * layouts/admin.php, у которого свой отдельный сайдбар (class="sidebar", * без иконок) в layout.css. Тот файл сознательно не тронут: он общий * для main.php и admin.php, и правки в нём задели бы админку. * * Из-за этого часть правил ниже (список .sidebar-nav, .nav-item__icon/ * __label и т.д.) намеренно скопирована под #sidebar — новый сайдбар * получил свой собственный id, а не переиспользует старый class="sidebar", * поэтому конфликтов с layout.css/admin.php нет в принципе. Токены — * только из theme.css, своих цветов файл не заводит. */ :root { --sidebar-w-collapsed: 72px; --sidebar-w-expanded: 240px; --bottombar-h: 64px; } body { --sidebar-w: var(--sidebar-w-collapsed); } /* Новый каркас для main.php (вместо старого .app-layout, который остаётся за admin.php как есть). .app-header/.app-content — те же классы, что и в layout.css, но дочерний селектор ограничивает эти правила только тем случаем, когда они лежат прямо внутри .app-shell — на admin.php (там родитель .app-layout) это никак не влияет. */ .app-shell { display: flex; flex-direction: column; min-height: 100vh; } .app-shell > .app-header { flex: 0 0 56px; } .app-shell > .app-content { flex: 1 1 auto; overflow-y: auto; } /* Смещение контента под фиксированный #sidebar. Селектор с body./тегом — чтобы это правило гарантированно перебивало .guest-layout { padding: … } из auth.css независимо от порядка подключения файлов в . */ body.app-shell, body.guest-layout { padding-left: var(--sidebar-w); transition: padding-left 0.25s ease; } #sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; display: flex; flex-direction: column; width: var(--sidebar-w); padding: 1.25rem 0.75rem; background-color: var(--bg-surface); border-right: 1px solid color-mix(in srgb, var(--text-secondary) 12%, transparent); overflow-x: hidden; overflow-y: auto; transition: width 0.25s ease; } .sidebar-top { display: flex; justify-content: flex-start; margin-bottom: 1.25rem; } .sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; background: none; border: none; color: var(--text-secondary); cursor: pointer; clip-path: var(--clip-tactical); } .sidebar-toggle:hover { color: var(--brand-color); background: color-mix(in srgb, var(--brand-color) 8%, transparent); } .sidebar-toggle svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* Список пунктов — #sidebar .sidebar-nav (не голый .sidebar-nav), чтобы list-style/gap здесь не задевали