feat: Sidebar + SidebarToggle, адаптивность компонентов (0.2.0)

2026-08-14 10:35:42 +05:00
parent e65805379e
commit c72f93e359
38 changed files with 985 additions and 14 deletions
@@ -0,0 +1,204 @@
+@import '../tokens/tokens';
+
+// Тёмный боковой рейл на всю высоту (фирменный navy-градиент, золотой
+// маркер активного пункта). Не «плавает»: примыкает к контенту, тянется по высоте.
+.nav {
+  display: flex;
+  flex-direction: column;
+  width: 248px;
+  padding: $sp-4 0 $sp-3;
+  background: $grad-header;
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
+  transition: width .2s;
+}
+
+.navCollapsed {
+  width: 64px;
+}
+
+// ---- Шапка рейла: бренд + сворачивание ----
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $sp-2;
+  padding: 0 $sp-4 $sp-4;
+  border-bottom: 1px solid rgba(255, 255, 255, .08);
+}
+
+.navCollapsed .head {
+  flex-direction: column;
+  gap: $sp-3;
+  padding: 0 0 $sp-3;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: $sp-2;
+  min-width: 0;
+}
+
+.brandText {
+  font-family: $font-serif;
+  font-size: 15px;
+  font-weight: 600;
+  color: $white;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toggle {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, .18);
+  border-radius: $r-sm;
+  background: transparent;
+  color: rgba(255, 255, 255, .6);
+  cursor: pointer;
+  transition: .16s;
+
+  &:hover {
+    border-color: $gold-400;
+    color: $gold-300;
+  }
+}
+
+// ---- Пункты разделов ----
+.items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-top: $sp-4;
+}
+
+.navCollapsed .items {
+  margin-top: $sp-3;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: $sp-3;
+  width: 100%;
+  padding: 12px 18px;
+  border: 0;
+  border-left: 3px solid transparent;
+  background: transparent;
+  color: rgba(255, 255, 255, .62);
+  font-family: $font-sans;
+  font-size: 13.5px;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color .18s, background .18s, border-color .18s;
+
+  &:hover {
+    color: rgba(255, 255, 255, .92);
+    background: rgba(255, 255, 255, .04);
+  }
+}
+
+.navCollapsed .item {
+  justify-content: center;
+  padding: 12px 0;
+}
+
+.itemActive {
+  color: $white;
+  background: rgba(255, 255, 255, .07);
+  border-left-color: $gold-500;
+
+  .itemIcon {
+    color: $gold-400;
+  }
+}
+
+.itemIcon {
+  flex-shrink: 0;
+  display: inline-flex;
+  color: inherit;
+}
+
+.itemTitle {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.badge {
+  flex-shrink: 0;
+  min-width: 18px;
+  padding: 1px 6px;
+  border-radius: $r-full;
+  background: $gold-500;
+  color: $navy-950;
+  font-size: $fs-overline;
+  font-weight: 700;
+  text-align: center;
+}
+
+.navCollapsed .badge {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+}
+
+// ---- Затемнение фона под мобильным drawer ----
+.backdrop {
+  display: none;
+}
+
+// ---- Адаптив: < 768px рейл превращается в выезжающий drawer ----
+// На мобилке сайдбар спрятан за левым краем и выезжает поверх контента, когда
+// родитель ставит mobileOpen (бургер в шапке). Свёрнутый режим (иконки) на
+// мобилке не применяем — drawer всегда полный; переключатель ширины прячем.
+@include below($bp-md) {
+  .nav,
+  .navCollapsed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000;
+    width: 248px;
+    transform: translateX(-100%);
+    transition: transform .25s ease;
+  }
+
+  .navMobileOpen {
+    transform: translateX(0);
+    box-shadow: $sh-modal;
+  }
+
+  .toggle {
+    display: none;
+  }
+
+  .backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    background: rgba(10, 27, 48, .45);
+  }
+}
+
+// На совсем узких экранах drawer занимает почти всю ширину, оставляя щель
+// для затемнения справа — так видно, что за ним есть контент.
+@include below($bp-xs) {
+  .nav,
+  .navCollapsed {
+    width: 86vw;
+    max-width: 300px;
+  }
+}