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

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

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

src/.vitepress/theme/components/CustomButton.vue

@@ -5,7 +5,7 @@ import { EXTERNAL_URL_RE } from 'vitepress/dist/client/shared'
 
 interface Props {
   tag?: string
-  size?: 'medium' | 'big'
+  size?: 'medium' | 'big' | 'small'
   theme?: 'brand' | 'alt' | 'sponsor'
   text: string
   href?: string
@@ -51,6 +51,15 @@ const component = computed(() => {
   transition: color 0.1s, border-color 0.1s, background-color 0.1s;
 }
 
+.VPButton.small {
+  border-radius: 12px;
+  padding: 0 16px;
+  line-height: 20px;
+  height: 40px;
+  font-size: 15px;
+  font-weight: 500;
+}
+
 .VPButton.medium {
   border-radius: 12px;
   padding: 0 20px;

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>

src/.vitepress/theme/components/CustomNavBarMenuLink.vue

@@ -3,12 +3,16 @@ import type { DefaultTheme } from 'vitepress/theme'
 import { useData } from 'vitepress/dist/client/theme-default/composables/data'
 import { isActive } from 'vitepress/dist/client/shared'
 import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue'
+import { computed, ref } from 'vue'
 
 defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
 const { page } = useData()
+const textRef = ref<HTMLElement | null>(null)
+
+const wrapperWidth = computed(() => textRef.value?.offsetWidth)
 </script>
 
 <template>
@@ -20,22 +24,32 @@ const { page } = useData()
         page.relativePath,
         item.activeMatch || item.link,
         !!item.activeMatch
-      )
+      ),
+      disabled: !isActive(
+        page.relativePath,
+        item.activeMatch || item.link,
+        !!item.activeMatch
+      ) && !item.link ? 'disabled' : '',
     }"
     :href="item.link"
     :target="item.target"
     :rel="item.rel"
     tabindex="0"
   >
-    <span v-html="item.text"></span>
+    <span
+      ref="textRef"
+      v-html="item.text"
+    />
   </VPLink>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+@use '@beeline/design-tokens/scss/tokens/globals/colors';
+
 .VPNavBarMenuLink {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 24px;
   line-height: var(--vp-nav-height);
   font-size: 16px;
   font-weight: 500;
@@ -45,9 +59,32 @@ const { page } = useData()
 
 .VPNavBarMenuLink.active {
   color: var(--color-text-active);
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    content: '';
+    height: 4px;
+    display: none;
+    width: calc(v-bind(wrapperWidth) * 1px);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    background-color: colors.$color-background-brand;
+  }
+
+  &.active {
+    &::after {
+      display: block;
+    }
+  }
 }
 
-.VPNavBarMenuLink:hover {
+.disabled {
+  opacity: 0.45;
+  pointer-events: none;
+}
+
+.VPNavBarMenuLink:hover:not(.disabled) {
   color: var(--color-text-active);
 }
 </style>

src/.vitepress/theme/components/CustomNavBarSearchButton.vue

@@ -14,31 +14,22 @@ const $t = createSearchTranslate(defaultTranslations)
 </script>
 
 <template>
-  <button type="button" class="DocSearch DocSearch-Button CustomDocSearch-Button" :aria-label="$t('button.buttonAriaLabel')">
-    <span class="DocSearch-Button-Container">
-      <svg
-        class="DocSearch-Search-Icon"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        aria-label="search icon"
-      >
-        <path
-          d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
-          stroke="currentColor"
-          fill="none"
-          fill-rule="evenodd"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-      </svg>
-      <span class="DocSearch-Button-Placeholder">{{ $t('button.buttonText') }}</span>
-    </span>
-    <span class="DocSearch-Button-Keys">
-      <kbd class="DocSearch-Button-Key"></kbd>
-      <kbd class="DocSearch-Button-Key">K</kbd>
-    </span>
-  </button>
+  <svg
+    class="DocSearch-Search-Icon"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    aria-label="search icon"
+  >
+    <path
+      d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z"
+      stroke="currentColor"
+      fill="none"
+      fill-rule="evenodd"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
 </template>
 
 <style>
@@ -65,156 +56,13 @@ const $t = createSearchTranslate(defaultTranslations)
   --docsearch-hit-shadow: none;
 }
 
-.DocSearch-Button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 12px;
-  margin: 0;
-  padding: 0;
-  width: 48px;
-  height: 55px;
-  background: transparent;
-  transition: border-color 0.25s;
-}
-
-.DocSearch-Button:hover {
-  background: transparent;
-}
-
-.DocSearch-Button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-.DocSearch-Button:focus:not(:focus-visible) {
-  outline: none !important;
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button {
-    justify-content: flex-start;
-    border: 1px solid transparent;
-    border-radius: 12px;
-    padding: 0 10px 0 12px;
-    width: 100%;
-    height: 40px;
-    background-color: var(--vp-c-bg-alt);
-  }
-
-  .DocSearch-Button:hover {
-    border-color: var(--vp-c-brand-1);
-    background: var(--vp-c-bg-alt);
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Container {
-  display: flex;
-  align-items: center;
-}
-
-.DocSearch-Button .DocSearch-Search-Icon {
+.DocSearch-Search-Icon {
   position: relative;
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   color: var(--vp-c-text-1);
   fill: currentColor;
   transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Search-Icon {
-  color: var(--vp-c-text-1);
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Search-Icon {
-    top: 1px;
-    margin-right: 8px;
-    width: 14px;
-    height: 14px;
-    color: var(--vp-c-text-2);
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Placeholder {
-  display: none;
-  margin-top: 2px;
-  padding: 0 16px 0 0;
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--vp-c-text-2);
-  transition: color 0.5s;
-}
-
-.DocSearch-Button:hover .DocSearch-Button-Placeholder {
-  color: var(--vp-c-text-1);
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Placeholder {
-    display: inline-block;
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Keys {
-  /*rtl:ignore*/
-  direction: ltr;
-  display: none;
-  min-width: auto;
-}
-
-@media (min-width: 768px) {
-  .DocSearch-Button .DocSearch-Button-Keys {
-    display: flex;
-    align-items: center;
-  }
-}
-
-.DocSearch-Button .DocSearch-Button-Key {
-  display: block;
-  margin: 2px 0 0 0;
-  border: 1px solid var(--vp-c-divider);
-  /*rtl:begin:ignore*/
-  border-right: none;
-  border-radius: 4px 0 0 4px;
-  padding-left: 6px;
-  /*rtl:end:ignore*/
-  min-width: 0;
-  width: auto;
-  height: 22px;
-  line-height: 22px;
-  font-family: var(--vp-font-family-base);
-  font-size: 12px;
-  font-weight: 500;
-  transition: color 0.5s, border-color 0.5s;
-}
-
-.DocSearch-Button .DocSearch-Button-Key + .DocSearch-Button-Key {
-  /*rtl:begin:ignore*/
-  border-right: 1px solid var(--vp-c-divider);
-  border-left: none;
-  border-radius: 0 4px 4px 0;
-  padding-left: 2px;
-  padding-right: 6px;
-  /*rtl:end:ignore*/
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child {
-  font-size: 0 !important;
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: 'Ctrl';
-  font-size: 12px;
-  letter-spacing: normal;
-  color: var(--docsearch-muted-color);
-}
-
-.mac .DocSearch-Button .DocSearch-Button-Key:first-child:after {
-  content: '\2318';
-}
-
-.DocSearch-Button .DocSearch-Button-Key:first-child > * {
-  display: none;
+  margin: 8px;
 }
 </style>

src/.vitepress/theme/components/CustomNavBarTitle.vue

@@ -38,10 +38,10 @@ const target = computed(() =>
       :target="target"
     >
       <slot name="nav-bar-title-before" />
-      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
       <template v-if="theme.siteTitle">{{ theme.siteTitle }}</template>
       <template v-else-if="theme.siteTitle === undefined">{{ site.title }}</template>
       <slot name="nav-bar-title-after" />
+      <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
     </a>
   </div>
 </template>
@@ -53,10 +53,13 @@ const target = computed(() =>
   border-bottom: 1px solid transparent;
   width: 100%;
   height: var(--vp-nav-height);
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
+  font-size: 25px;
+  font-weight: 500;
+  line-height: 28px;
+  color: var(--color-text-inactive);
   transition: opacity 0.25s;
+  gap: 20px;
+  margin-right: 24px;
 }
 
 @media (min-width: 960px) {
@@ -72,7 +75,6 @@ const target = computed(() =>
 }
 
 :deep(.logo) {
-  margin-right: 8px;
   height: var(--vp-nav-logo-height);
 }
 </style>