переделка интерфейса

2026-08-04 16:59:12 +05:00
parent a387fec557
commit adf578182b
11 changed files with 865 additions and 672 deletions
@@ -0,0 +1,119 @@
+@import '../../../../styles/design-tokens';
+
+// Тёмное боковое меню портала (фирменный navy-градиент, золотой маркер
+// активного пункта — как в остальном дизайне).
+.nav {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 240px;
+  padding: $sp-3 0;
+  background: $grad-header;
+  border-radius: $r-lg;
+  box-shadow: $sh-2;
+  overflow: hidden;
+  transition: width .2s;
+}
+
+.toggle {
+  align-self: flex-end;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  margin: 0 $sp-3 $sp-2;
+  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;
+  }
+}
+
+.navCollapsed {
+  width: 56px;
+
+  .toggle {
+    align-self: center;
+    margin: 0 0 $sp-2;
+  }
+
+  .item {
+    justify-content: center;
+    padding: 12px 0;
+  }
+}
+
+.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);
+  }
+}
+
+.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;
+}