исправил боковую панель. теперь на десктопе она сворачивается не полностью

This commit is contained in:
Zuev
2026-03-28 14:20:46 +03:00
parent 0b9d063266
commit d0a8148fa0
4 changed files with 92 additions and 26 deletions

View File

@@ -13,7 +13,7 @@
top: 0;
bottom: 0;
z-index: 10;
transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.sidebar-header {
@@ -161,7 +161,8 @@
position: absolute;
bottom: calc(100% + 0.5rem);
left: 0;
right: 0;
min-width: 100%;
width: max-content;
background: rgba(10, 10, 15, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
@@ -241,13 +242,47 @@
/* Desktop Collapse State */
@media (min-width: 769px) {
.sidebar.collapsed {
transform: translateX(-100%);
width: 74px;
}
.sidebar.collapsed .logo span,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .btn-settings span,
.sidebar.collapsed .settings-chevron {
display: none;
}
.sidebar.collapsed .sidebar-close-btn {
transform: rotate(180deg);
}
.sidebar.collapsed .logo {
justify-content: center;
padding: 0;
}
.sidebar.collapsed .nav-item {
justify-content: center;
padding: 0.75rem 0;
}
.sidebar.collapsed .btn-settings {
justify-content: center;
padding: 0.65rem 0;
}
.sidebar.collapsed .sidebar-header {
flex-direction: column;
gap: 1.5rem;
padding: 1.25rem 0;
}
.main.sidebar-collapsed {
margin-left: 0;
margin-left: 74px;
}
.main.sidebar-collapsed .menu-toggle {
display: block;
display: none;
}
}

View File

@@ -38,8 +38,7 @@
</div>
<button class="sidebar-close-btn" id="sidebar-close-btn" aria-label="Скрыть панель">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
<polyline points="15 18 9 12 15 6" />
</svg>
</button>
</div>
@@ -52,7 +51,7 @@
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
Пользователи
<span>Пользователи</span>
</a>
<a href="#" class="nav-item" data-tab="department">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"
@@ -63,14 +62,14 @@
<path d="M8 11h0M12 11h0M16 11h0" />
<path d="M10 21v-4h4v4" />
</svg>
Кафедра
<span>Кафедра</span>
</a>
<a href="#" class="nav-item" data-tab="departments-data">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
</svg>
Создание кафедры/специальности
<span>Создание кафедры/специальности</span>
</a>
<a href="#" class="nav-item" data-tab="groups">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -78,7 +77,7 @@
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
</svg>
Группы
<span>Группы</span>
</a>
<a href="#" class="nav-item" data-tab="edu-forms">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -88,7 +87,7 @@
<line x1="9" y1="7" x2="17" y2="7" />
<line x1="9" y1="11" x2="15" y2="11" />
</svg>
Формы обучения
<span>Формы обучения</span>
</a>
<a href="#" class="nav-item" data-tab="equipments">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -96,14 +95,14 @@
<rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
</svg>
Оборудование
<span>Оборудование</span>
</a>
<a href="#" class="nav-item" data-tab="classrooms">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M3 3h18v18H3zM9 3v18M15 3v18M3 9h18M3 15h18" />
</svg>
Аудитории
<span>Аудитории</span>
</a>
<a href="#" class="nav-item" data-tab="subjects">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
@@ -111,7 +110,7 @@
<path d="M12 20h9" />
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
</svg>
Дисциплины
<span>Дисциплины</span>
</a>
<a href="#" class="nav-item" data-tab="schedule">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -120,7 +119,7 @@
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
Расписание занятий
<span>Расписание занятий</span>
</a>
<a href="#" class="nav-item" data-tab="database">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -128,7 +127,7 @@
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
</svg>
База данных
<span>База данных</span>
</a>
</nav>
<div class="sidebar-footer">
@@ -139,7 +138,7 @@
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
Настройки
<span>Настройки</span>
<svg class="settings-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9" />

View File

@@ -13,7 +13,7 @@
top: 0;
bottom: 0;
z-index: 10;
transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.sidebar-header {
@@ -153,13 +153,46 @@
/* Desktop Collapse State */
@media (min-width: 769px) {
.sidebar.collapsed {
transform: translateX(-100%);
width: 74px;
}
.sidebar.collapsed .logo span,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .btn-back span {
display: none;
}
.sidebar.collapsed .sidebar-close-btn {
transform: rotate(180deg);
}
.sidebar.collapsed .logo {
justify-content: center;
padding: 0;
}
.sidebar.collapsed .nav-item {
justify-content: center;
padding: 0.75rem 0;
}
.sidebar.collapsed .btn-back {
justify-content: center;
padding: 0.65rem 0;
}
.sidebar.collapsed .sidebar-header {
flex-direction: column;
gap: 1.5rem;
padding: 1.25rem 0;
}
.main.sidebar-collapsed {
margin-left: 0;
margin-left: 74px;
}
.main.sidebar-collapsed .menu-toggle {
display: block;
display: none;
}
}

View File

@@ -33,8 +33,7 @@
</div>
<button class="sidebar-close-btn" id="sidebar-close-btn" aria-label="Скрыть панель">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
<polyline points="15 18 9 12 15 6" />
</svg>
</button>
</div>
@@ -45,7 +44,7 @@
<circle cx="12" cy="12" r="3" />
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
</svg>
Общие настройки
<span>Общие настройки</span>
</a>
</nav>
<div class="sidebar-footer">
@@ -55,7 +54,7 @@
<line x1="19" y1="12" x2="5" y2="12" />
<polyline points="12 19 5 12 12 5" />
</svg>
Назад в панель
<span>Назад в панель</span>
</a>
</div>
</aside>