Merge branch 'fix/nav-drawer#VEGA-4802' into 'main'

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

See merge request common/vega/beecloud-docs!27

src/.vitepress/config.mts

@@ -121,35 +121,33 @@ export default defineConfig({
     '/platform/': [
       {
         text: 'Платформа Beeline Cloud', link: '/platform/index.md',
-        collapsed: true,
+      },
-          items: [
       {text: 'Сервисы', link: '/platform/services/services.md'},
       {text: 'Техническая поддержка', link: '/platform/support/support-overview.md'}, 
       ],
-        },
-      ],
     '/start/': [
       {
         text: 'Начало работы в Beeline Cloud', link: '/start/index.md',
-        collapsed: true,
+      },
-          items: [
       {text: 'Начать работу', link: '/start/getting-started.md'},
       {text: 'Бесплатный период', link: '/start/trial.md'}, 
       {text: 'Платное использование', link: '/start/organization.md'},
     ],
-        },
-      ],
     //  '/billing/': [
  
     //   ],
       '/vdc/': [
         {
           text: 'Виртуальные дата-центры на VMware', link: '/vdc/index.md',
-        collapsed: true,
+        },
-          items: [
+        {
-            {text: 'Обзор сервиса', link: '/vdc/vdc-overview.md'},
+          text: 'Обзор сервиса', link: '/vdc/vdc-overview.md'
-            {text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md'}, 
+        },
-            {text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md',
+        {
+          text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md'
+        }, 
+        {
+          text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md',
           collapsed: true,
           items: [
             { text: 'Создание дата-центра', link: '/vdc/vdc-how-to/vdc-create.md' },
@@ -166,11 +164,13 @@ export default defineConfig({
         },
         // { text: 'Тарификация', link: '/vdc/vdc-tarif.md' },
        ],
-        },
-       ],
       '/compute/': [
         {
           text: 'Виртуальные машины', link: '/compute/index.md',
+        },
+        //  {text: 'Быстрый старт', link: '/compute/compute-getting-started.md'}, 
+        { text: 'Обзор сервиса', link: '/compute/compute-overview.md' },
+        { text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
           collapsed: true,
           items: [
             {text: 'Обзор сервиса', link: '/compute/compute-overview.md'},
@@ -195,16 +195,21 @@ export default defineConfig({
               },  
           ],
         },
-       
+        { text: 'Диски', link: '/compute/compute-how-to/compute-disks.md' },
+        { text: 'IP-адреса', link: '/compute/compute-how-to/compute-ip.md' },
+        { text: 'Группы размещения', link: '/compute/compute-how-to/compute-affinity.md' },
+        { text: 'Практические руководства', link: '/compute/compute-guide/compute-guide-index.md',
+          collapsed: true,
+          items: [
+            { text: 'Подключение по SSH к ВМ закрытого контура', link: '/compute/compute-guide/compute-guide-ssh-inside.md' },
+          ],
+        },
       ],
       '/admin/': [
       {
         text: 'Аккаунт Beeline Cloud', link: '/admin/index.md',
-        collapsed: true,
-          items: [
-            {text: 'Управление ключевыми парами', link: '/admin/ssh.md'},
-          ],
       },
+      {text: 'Управление ключевыми парами', link: '/admin/ssh.md'},
       ],    
       },  
     },

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;
+  padding: 0px 0px 96px 0px;
-  width: 256px;
+  width: 320px;
-  max-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;
-}
+  padding-top: 24px;
-
+  width: 100%;
-.group + .group {
-  border-top: 1px solid var(--vp-c-divider);
-  padding-top: 10px;
 }
 
 @media (min-width: 960px) {
   .group {
-    padding-top: 10px;
+    width: 100%;
-    width: calc(var(--vp-sidebar-width) - 64px);
   }
 }
+
 </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 {
+  --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 {
-            font-size: 15px;
+        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;
+}