/* /domains/gromadan.com/public_html/css/menu/style.css
Стили левого меню (menu/index.php). Перенесены из css/style.css. */
.nav-menu {
background: var(--surface);
border-radius: var(--radius-lg);
padding: 14px;
box-shadow: var(--shadow);
/* было: flex: 1; — блок растягивался на всю высоту .sidebar,
из-за чего фон и тень уходили далеко вниз за последнюю кнопку.
стало: высота по контенту */
flex: 0 0 auto;
overflow-y: visible;
}
.nav-item {
display: flex;
align-items: center;
gap: 14px;
padding: 15px 18px;
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition);
margin-bottom: 4px;
font-size: 1rem;
color: var(--text-secondary);
position: relative;
}
.nav-item:hover {
background: var(--primary-light);
color: var(--primary);
}
.nav-item.active {
background: var(--primary-light);
color: var(--primary);
font-weight: 600;
}
.nav-badge {
margin-left: auto;
background: var(--primary);
color: white;
font-size: 0.72rem;
font-weight: 700;
padding: 3px 9px;
border-radius: var(--radius-pill);
}
.nav-icon {
width: 22px;
height: 22px;
opacity: 0.7;
flex-shrink: 0;
}
/* === Выезжающее меню на мобильных (открывается бургером из top_bar) ===
.sidebar всегда в DOM и всегда display:flex на мобильном, но уезжает
за левый край через translateX — так работает transition (на
display:none/flex анимация невозможна). Открытие/закрытие — классом
mobile-menu-open на . */
@media (max-width: 900px) {
.sidebar {
display: flex;
flex-direction: column;
gap: 16px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 280px;
max-width: 82vw;
padding: 16px 16px 16px 16px;
padding-top: 58px; /* место под крестик в верхнем левом углу */
background: var(--bg);
box-shadow: 0 0 24px rgba(0,0,0,0.25);
z-index: 1500;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body.mobile-menu-open .sidebar {
transform: translateX(0);
}
/* Крестик закрытия — та же позиция и тот же вид, что у бургера
в top_bar (класс .mobile-menu-btn общий) */
.mobile-menu-close {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
}
/* Бэкдроп: теперь отдельный от .sidebar элемент (см. index.php),
поэтому честно растягивается на весь экран (fixed от viewport,
а не от .sidebar), лежит НИЖЕ меню (z-index 1400 < 1500 у
.sidebar) и гасит клики только по контенту позади него */
.mobile-menu-backdrop {
position: fixed;
inset: 0;
background: rgba(26, 26, 46, 0.45);
z-index: 1400;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
body.mobile-menu-open .mobile-menu-backdrop {
opacity: 1;
pointer-events: auto;
}
}
@media (min-width: 901px) {
/* На десктопе крестик и бэкдроп не нужны вообще */
.mobile-menu-close,
.mobile-menu-backdrop {
display: none;
}
}
/* Кнопка "+ Створити" — выделена среди остальных пунктов меню */
.nav-item-create {
color: var(--primary);
font-weight: 700;
}
.nav-item-create .nav-icon {
color: var(--primary);
opacity: 1;
}
.nav-item-create:hover {
background: var(--primary-light);
}