Merge branch 'feature/header#VEGA-4759' into 'main'

VEGA-4759 Адаптация UI шапки портала документации

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

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

@@ -12,6 +12,7 @@ import VPNavBarSearch from 'vitepress/dist/client/theme-default/components/VPNav
 import VPNavBarSocialLinks from 'vitepress/dist/client/theme-default/components/VPNavBarSocialLinks.vue'
 import CustomNavBarTitle from './CustomNavBarTitle.vue'
 import VPNavBarTranslations from 'vitepress/dist/client/theme-default/components/VPNavBarTranslations.vue'
+import CustomButton from './CustomButton.vue'
 
 defineProps<{
   isScreenOpen: boolean
@@ -27,6 +28,7 @@ const { hasLocalNav } = useLocalNav()
 const { frontmatter } = useData()
 
 const classes = ref<Record<string, boolean>>({})
+const loginUrl = import.meta.env.VITE_LOGIN_URL
 
 watchPostEffect(() => {
   classes.value = {
@@ -51,14 +53,9 @@ watchPostEffect(() => {
         <div class="content">
           <div class="content-body">
             <slot name="nav-bar-content-before" />
-            <VPNavBarSearch class="search" />
             <VPNavBarMenu class="menu" />
-            <VPNavBarTranslations class="translations" />
-            <VPNavBarAppearance class="appearance" />
-            <VPNavBarSocialLinks class="social-links" />
-            <VPNavBarExtra class="extra" />
-            <slot name="nav-bar-content-after" />
-            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+            <VPNavBarSearch class="search" />
+            <CustomButton text="Войти" size="small" :href="loginUrl" />
           </div>
         </div>
       </div>
@@ -105,7 +102,7 @@ watchPostEffect(() => {
 
 @media (min-width: 768px) {
   .wrapper {
-    padding: 0 32px;
+    padding: 0 24px;
   }
 }
 
@@ -187,7 +184,7 @@ watchPostEffect(() => {
 
 .content-body {
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   align-items: center;
   height: var(--vp-nav-height);
   transition: background-color 0.5s;
@@ -221,6 +218,10 @@ watchPostEffect(() => {
   height: 24px;
   background-color: var(--vp-c-divider);
   content: "";
+  font-weight: 500;
+  font-size: 15px;
+  line-height: 20px;
+  letter-spacing: 0.2px;
 }
 
 .menu + .appearance::before,
@@ -251,4 +252,9 @@ watchPostEffect(() => {
     background-color: rgba(255, 255, 255, 0.2);
   }
 }
+
+.search {
+  justify-content: flex-end;
+  margin-right: 24px;
+}
 </style>