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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user