feat: Sidebar — пункты-ссылки и раскрывающиеся группы (0.13.0)

ISidebarItem.href открывает пункт как внешнюю ссылку в новой вкладке,
ISidebarItem.children делает пункт раскрывающейся группой с подпунктами
(ссылки или разделы). Без новых полей меню работает как раньше.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Тимур Городецкий
2026-10-23 10:12:13 +05:00
parent 0082b90c2b
commit 06e9007e73
12 changed files with 367 additions and 35 deletions
+51
View File
@@ -97,6 +97,8 @@
font-size: 13.5px;
font-weight: 500;
text-align: left;
// Пункт-ссылка (<a>) выглядит так же, как пункт-кнопка.
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color .18s, background .18s, border-color .18s;
@@ -153,6 +155,55 @@
right: 8px;
}
// ---- Раскрывающаяся группа: подпункты без иконок, с отступом под иконку шапки ----
$sub-item-indent: 48px; // 18px отступ пункта + 3px маркер + иконка 16px + зазор
.group {
display: flex;
flex-direction: column;
}
.groupChevron {
flex-shrink: 0;
display: inline-flex;
color: rgba(255, 255, 255, .45);
}
.subItems {
display: flex;
flex-direction: column;
padding-bottom: $sp-1;
}
.subItem {
display: flex;
align-items: center;
gap: $sp-2;
width: 100%;
padding: 8px 18px 8px $sub-item-indent;
border: 0;
border-left: 3px solid transparent;
background: transparent;
color: rgba(255, 255, 255, .55);
font-family: $font-sans;
font-size: 13px;
text-align: left;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: color .18s, background .18s;
&:hover {
color: rgba(255, 255, 255, .92);
background: rgba(255, 255, 255, .04);
}
}
.subItemActive {
color: $white;
border-left-color: $gold-500;
}
// ---- Затемнение фона под мобильным drawer ----
.backdrop {
display: none;