VEGA-4802 Адаптация бокового меню

src/.vitepress/theme/components/CustomNavBar.vue

@@ -174,7 +174,7 @@ watchPostEffect(() => {
     position: relative;
     z-index: 1;
     padding-right: 32px;
-    padding-left: var(--vp-sidebar-width);
+    padding-left: 0px;
   }
 }
 

src/.vitepress/theme/components/CustomSidebar.vue

@@ -60,9 +60,8 @@ watch(
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);
-  padding: 32px 32px 96px 32px;
-  width: 256px;
-  max-width: 320px;
+  padding: 0px 0px 96px 0px;
+  width: 320px;
   background-color: var(--vp-sidebar-bg-color);
   opacity: 0;
   box-shadow: var(--vp-c-shadow-3);
@@ -88,8 +87,6 @@ watch(
 @media (min-width: 960px) {
   .VPSidebar {
     padding-top: var(--vp-nav-height);
-    // width: var(--vp-sidebar-width);
-    // max-width: 100%;
     background-color: var(--vp-sidebar-bg-color);
     opacity: 1;
     visibility: visible;
@@ -98,13 +95,6 @@ watch(
   }
 }
 
-@media (min-width: 1440px) {
-  .VPSidebar {
-    // padding-left: max(32px, calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));
-    // width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
-  }
-}
-
 @media (min-width: 960px) {
   .curtain {
     position: sticky;
@@ -121,17 +111,14 @@ watch(
 
 .nav {
   outline: 0;
-}
-
-.group + .group {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 10px;
+  padding-top: 24px;
+  width: 100%;
 }
 
 @media (min-width: 960px) {
   .group {
-    padding-top: 10px;
-    width: calc(var(--vp-sidebar-width) - 64px);
+    width: 100%;
   }
 }
+
 </style>

src/.vitepress/theme/scss/components/vp-sidebar.scss

@@ -1,7 +1,113 @@
+@use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
+@use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
+
 .VPSidebar {
-    &Item {
-        .text {
-            font-size: 15px;
-        }
+  --vp-sidebar-bg-color: var(--vp-c-bg);
+}
+
+.VPSidebar .VPSidebarItem .item {
+  margin: 4px 0;
+}
+
+.VPSidebar .VPSidebarItem .link {
+  display: flex;
+  align-items: center;
+}
+
+.indicator {
+  border-top-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-topright !important;
+  border-bottom-right-radius: navigationDrawer.$navigation-drawer-item-indicator-border-radius-bottomright !important;
+  position: absolute !important;
+  left: 0 !important;
+}
+
+.VPSidebarItem.is-active > .item .link > .text {
+  color: theme.$color-text-active !important;
+  font-weight: 500 !important;
+  line-height: 20px !important;
+}
+
+.VPSidebarItem {
+  .item {
+    padding: 12px 32px !important;
+    border-top-right-radius: 12px !important; 
+    border-bottom-right-radius: 12px !important;
+    color: theme.$color-text-inactive;
+    
+    &:hover {
+      background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
+      color: theme.$color-text-inactive;
     }
+  }
+
+  &.is-active > .item > .indicator {
+    border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
+      navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
+  }
+}
+
+.VPSidebarItem.collapsible {
+  .items {
+    margin-left: 16px;
+
+    .item {
+      padding: 12px 16px 12px 56px !important;
+      border-top-left-radius: 12px !important; 
+      border-bottom-left-radius: 12px !important;
+    }
+  }
+
+  &.is-active,
+  &.has-active {
+    > .item {
+      .indicator {
+        display: block !important;
+        border-left: navigationDrawer.$navigation-drawer-item-indicator-width solid
+          navigationDrawer.$navigation-drawer-item-activated-indicator-color !important;
+      }
+      
+      .text {
+        color: theme.$color-text-active !important;
+        font-weight: 500 !important;
+      }
+    }
+  }
+
+  .items .VPSidebarItem.is-active > .item {
+    background-color: navigationDrawer.$navigation-drawer-item-hover-background-color !important;
+    
+    .text {
+      color: theme.$color-text-active !important;
+      font-weight: 500 !important;
+    }
+  }
+}
+
+.VPSidebarItem.collapsible .items .item .indicator {
+  display: none !important;
+}
+
+.text {
+  padding: 0px !important;
+  font-weight: 400 !important;
+  font-size: 15px !important;
+  line-height: 18px !important;
+  letter-spacing: 0.2px !important;
+  
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  color: theme.$color-text-inactive !important;
+}
+
+.VPSidebarItem .items {
+  border-left: 0px !important;
+}
+
+.VPSidebarItem {
+  padding-bottom: 0px !important;
+}
+
+.VPLocalNav.has-sidebar {
+  padding-left: 320px !important;
 }