feat: Sidebar — разделители и перенос длинных названий (0.14.0)

Проп dividers рисует тонкие линии между пунктами (подпункты раскрытой
группы — без линий). Длинное название пункта переносится на вторую
строку вместо обрезки многоточием (не больше 2 строк).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Тимур Городецкий
2026-10-23 17:54:45 +05:00
parent 06e9007e73
commit 048fec0696
5 changed files with 46 additions and 6 deletions
+19 -3
View File
@@ -99,7 +99,8 @@
text-align: left;
// Пункт-ссылка (<a>) выглядит так же, как пункт-кнопка.
text-decoration: none;
white-space: nowrap;
// Длинное название переносится (не больше 2 строк — см. .itemTitle), а не обрезается многоточием.
white-space: normal;
cursor: pointer;
transition: color .18s, background .18s, border-color .18s;
@@ -130,11 +131,26 @@
color: inherit;
}
// Не больше 2 строк: совсем длинное название обрезается многоточием на второй строке.
.itemTitle {
flex: 1;
min-width: 0;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
overflow-wrap: anywhere;
}
// ---- Линии между пунктами (проп dividers) ----
// Линия — над каждым пунктом, кроме первого; подпункты раскрытой группы лежат внутри .group — их не трогаем.
.navDividers .items {
gap: 0;
> * + * {
border-top: 1px solid rgba(255, 255, 255, .06);
}
}
.badge {
@@ -189,7 +205,7 @@ $sub-item-indent: 48px; // 18px отступ пункта + 3px маркер +
font-size: 13px;
text-align: left;
text-decoration: none;
white-space: nowrap;
white-space: normal;
cursor: pointer;
transition: color .18s, background .18s;