adata-ui 2.1.40-beta.2 → 2.1.40-beta.20

package/components/navigation/header/HeaderLink.vue

@@ -1,260 +1,250 @@
-<script setup lang="ts">
-import type { Component } from 'vue'
-import ContactMenu from '#adata-ui/components/navigation/header/ContactMenu.vue'
-import ProductMenu from '#adata-ui/components/navigation/header/ProductMenu.vue'
-import { useUrls } from '#adata-ui/composables/useUrls'
-import { PAGES } from '#adata-ui/shared/constans/pages'
-import { buildLocalizedUrl, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
-
-withDefaults(defineProps<{ menuTop?: number }>(), {
-  menuTop: 64,
-})
-
-const { landing } = useUrls()
-const { t, locale } = useI18n()
-
-interface HeaderNav {
-  label: string
-  dataAttribute: string
-  menu?: Component
-}
-
-const navs: HeaderNav[] = [
-  { label: 'header.navs.products', dataAttribute: 'header-products-and-solutions-button', menu: ProductMenu },
-  { label: 'header.navs.contacts', dataAttribute: 'header-contacts-button', menu: ContactMenu },
-  { label: 'header.navs.tariffs', dataAttribute: 'header-tariffs-button' },
-]
-
-const OPEN_DELAY = 500 // hover dwell before opening, so a pass-through doesn't trigger it
-const SWITCH_DELAY = 80 // snappier when moving between items with the menu already open
-
-const menu = ref<HTMLElement | null>(null)
-const show = ref(false)
-const locked = ref(false) // a click pins the menu; hover can no longer close it
-const currentIndex = ref(0)
-const swapName = ref('swap-fade') // panel transition: directional slide on switch, fade on fresh open
-const hoverTimer = ref<ReturnType<typeof setTimeout> | null>(null)
-
-const currentMenu = computed(() => navs[currentIndex.value]?.menu ?? null)
-
-function isActive(index: number) {
-  return show.value && currentIndex.value === index
-}
-
-// Open `index`'s panel. Slide toward the direction of travel when switching
-// between already-open panels; fade (no sideways shift) on a fresh open.
-function openMenu(index: number) {
-  swapName.value = show.value && index !== currentIndex.value
-    ? (index > currentIndex.value ? 'slide-next' : 'slide-prev')
-    : 'swap-fade'
-  currentIndex.value = index
-  show.value = true
-}
-
-function closeMenu() {
-  show.value = false
-  locked.value = false
-}
-
-function goToTariffs() {
-  const host = useRequestURL().hostname
-  const codeMap: Record<string, string> = {
-    pk: 'pk',
-    avto: 'auto',
-    tnved: 'ved',
-    analytics: 'analytics',
-    ac: 'compliance',
-    zakupki: 'procurement',
-    edo: 'edo',
-  }
-  const key = Object.keys(codeMap).find(item => host.includes(item))
-  const code = key ? `?code=${codeMap[key]}` : ''
-  navigateToLocalizedPage({ locale, projectUrl: landing, path: PAGES.tariffs + code, target: '_blank' })
-}
-
-// Click pins the menu open; items without a menu (Tariffs) navigate instead.
-function toggleMenu(index: number) {
-  const nav = navs[index]
-  if (!nav?.menu) {
-    goToTariffs()
-    return
-  }
-  if (show.value && currentIndex.value === index) {
-    closeMenu()
-    return
-  }
-  openMenu(index)
-  locked.value = true
-}
-
-function clearHoverTimer() {
-  if (hoverTimer.value) {
-    clearTimeout(hoverTimer.value)
-    hoverTimer.value = null
-  }
-}
-
-// Hover opens menu items; hovering Tariffs dismisses an unpinned menu.
-function scheduleOpen(index: number) {
-  clearHoverTimer()
-  hoverTimer.value = setTimeout(() => {
-    if (navs[index]?.menu) openMenu(index)
-    else if (show.value && !locked.value) closeMenu()
-  }, show.value ? SWITCH_DELAY : OPEN_DELAY)
-}
-
-// Overlay closes on click regardless of the pin; on hover only while unpinned.
-function onOverlayHover() {
-  if (!locked.value) closeMenu()
-}
-
-// Lock body scroll while the mega-menu is open. `scrollbar-gutter: stable` is set
-// globally, so we don't reserve the gap to avoid a double-compensated page shift.
-// The panel is mounted via v-if, so wait a tick for the ref on open.
-watch(show, async (open) => {
-  if (open) {
-    await nextTick()
-    if (menu.value) disableBodyScroll(menu.value, { reserveScrollBarGap: false })
-  }
-  else if (menu.value) {
-    enableBodyScroll(menu.value)
-  }
-})
-
-onBeforeUnmount(() => {
-  clearHoverTimer()
-  if (menu.value) enableBodyScroll(menu.value)
-})
-</script>
-
-<template>
-  <div class="relative">
-    <ul class="flex items-center">
-      <li
-        v-for="(nav, index) in navs"
-        :key="nav.label"
-        class="relative after:absolute after:right-0 after:top-1/2 after:h-6 after:w-px after:-translate-y-1/2 after:bg-gray-300 last:after:hidden dark:after:bg-gray-700"
-        :data-test-id="nav.dataAttribute"
-        role="listitem"
-      >
-        <button
-          type="button"
-          class="group relative cursor-pointer px-3 py-2 font-bold uppercase tracking-tight transition-colors duration-150"
-          :class="isActive(index)
-            ? 'text-blue-700 dark:text-blue-400'
-            : 'text-deepblue-900 hover:text-blue-700 dark:text-gray-200 dark:hover:text-blue-400'"
-          @mouseenter="scheduleOpen(index)"
-          @mouseleave="clearHoverTimer"
-          @click="toggleMenu(index)"
-        >
-          {{ t(nav.label) }}
-          <span
-            class="absolute inset-x-3 -bottom-0.5 h-0.5 origin-left rounded-full bg-blue-600 transition-transform duration-200 dark:bg-blue-400"
-            :class="isActive(index) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"
-          />
-        </button>
-      </li>
-    </ul>
-
-    <!-- One transition drives the whole panel's open/close (appear + disappear). -->
-    <transition name="menu">
-      <div
-        v-if="show"
-        ref="menu"
-        class="fixed inset-x-0 z-20"
-        :style="{ top: `${menuTop}px`, height: `calc(100dvh - ${menuTop}px)` }"
-      >
-        <!-- Full-page dimmed blur backdrop behind the panel. -->
-        <div
-          class="absolute inset-0 bg-gray-900/30 backdrop-blur dark:bg-black/50"
-          @click="closeMenu"
-          @mouseover="onOverlayHover"
-        />
-
-        <!-- Panel on top; slides left/right when switching between menu items. -->
-        <transition
-          :name="swapName"
-          mode="out-in"
-        >
-          <component
-            :is="currentMenu"
-            :key="currentIndex"
-            class="relative"
-            :url="buildLocalizedUrl(locale, landing, PAGES.contacts)"
-          />
-        </transition>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped lang="scss">
-$ease: cubic-bezier(0.22, 1, 0.36, 1);
-$shift: 24px;
-
-// Whole menu: open and close (vertical fade, no horizontal motion).
-.menu-enter-active,
-.menu-leave-active {
-  transition:
-    opacity 0.25s $ease,
-    transform 0.25s $ease;
-}
-
-.menu-enter-from,
-.menu-leave-to {
-  opacity: 0;
-  transform: translateY(-12px);
-}
-
-// Switching panels: slide toward the direction of travel (out-in, so no overlap).
-.slide-next-enter-active,
-.slide-next-leave-active,
-.slide-prev-enter-active,
-.slide-prev-leave-active,
-.swap-fade-enter-active,
-.swap-fade-leave-active {
-  transition:
-    opacity 0.2s $ease,
-    transform 0.2s $ease;
-}
-
-.slide-next-enter-from {
-  opacity: 0;
-  transform: translateX($shift);
-}
-
-.slide-next-leave-to {
-  opacity: 0;
-  transform: translateX(-$shift);
-}
-
-.slide-prev-enter-from {
-  opacity: 0;
-  transform: translateX(-$shift);
-}
-
-.slide-prev-leave-to {
-  opacity: 0;
-  transform: translateX($shift);
-}
-
-// Fresh open (no switch): fade only, so the panel never slides sideways.
-.swap-fade-enter-from,
-.swap-fade-leave-to {
-  opacity: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .menu-enter-active,
-  .menu-leave-active,
-  .slide-next-enter-active,
-  .slide-next-leave-active,
-  .slide-prev-enter-active,
-  .slide-prev-leave-active,
-  .swap-fade-enter-active,
-  .swap-fade-leave-active {
-    transition: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import type { Component } from 'vue'
+import ContactMenu from '#adata-ui/components/navigation/header/ContactMenu.vue'
+import ProductMenu from '#adata-ui/components/navigation/header/ProductMenu.vue'
+import { useUrls } from '#adata-ui/composables/useUrls'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import { buildLocalizedUrl, navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'
+
+withDefaults(defineProps<{ menuTop?: number }>(), {
+  menuTop: 64,
+})
+
+const { landing } = useUrls()
+const { t, locale } = useI18n()
+
+interface HeaderNav {
+  label: string
+  dataAttribute: string
+  menu?: Component
+}
+
+const navs: HeaderNav[] = [
+  { label: 'header.navs.products', dataAttribute: 'header-products-and-solutions-button', menu: ProductMenu },
+  { label: 'header.navs.contacts', dataAttribute: 'header-contacts-button' },
+  { label: 'header.navs.tariffs', dataAttribute: 'header-tariffs-button' },
+]
+
+const OPEN_DELAY = 500
+const SWITCH_DELAY = 80
+
+const menu = ref<HTMLElement | null>(null)
+const show = ref(false)
+const locked = ref(false)
+const currentIndex = ref(0)
+const swapName = ref('swap-fade')
+const hoverTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+
+const currentMenu = computed(() => navs[currentIndex.value]?.menu ?? null)
+
+function isActive(index: number) {
+  return show.value && currentIndex.value === index
+}
+
+function openMenu(index: number) {
+  swapName.value = show.value && index !== currentIndex.value
+    ? (index > currentIndex.value ? 'slide-next' : 'slide-prev')
+    : 'swap-fade'
+  currentIndex.value = index
+  show.value = true
+}
+
+function closeMenu() {
+  show.value = false
+  locked.value = false
+}
+
+function goToContacts() {
+  navigateToLocalizedPage({ locale, projectUrl: landing, path: PAGES.contacts, target: '_blank' })
+}
+
+function goToTariffs() {
+  const host = useRequestURL().hostname
+  const codeMap: Record<string, string> = {
+    pk: 'pk',
+    avto: 'auto',
+    tnved: 'ved',
+    analytics: 'analytics',
+    ac: 'compliance',
+    zakupki: 'procurement',
+    edo: 'edo',
+  }
+  const key = Object.keys(codeMap).find(item => host.includes(item))
+  const code = key ? `?code=${codeMap[key]}` : ''
+  navigateToLocalizedPage({ locale, projectUrl: landing, path: PAGES.tariffs + code, target: '_blank' })
+}
+
+function toggleMenu(index: number) {
+  const nav = navs[index]
+  if (!nav?.menu) {
+    if (index === 1) {
+      goToContacts()
+    }
+    else if (index === 2) {
+      goToTariffs()
+    }
+    return
+  }
+  openMenu(index)
+  locked.value = true
+}
+
+function clearHoverTimer() {
+  if (hoverTimer.value) {
+    clearTimeout(hoverTimer.value)
+    hoverTimer.value = null
+  }
+}
+
+function scheduleOpen(index: number) {
+  clearHoverTimer()
+  hoverTimer.value = setTimeout(() => {
+    if (navs[index]?.menu) openMenu(index)
+    else if (show.value && !locked.value) closeMenu()
+  }, show.value ? SWITCH_DELAY : OPEN_DELAY)
+}
+
+function onOverlayHover() {
+  if (!locked.value) closeMenu()
+}
+
+watch(show, async (open) => {
+  if (open) {
+    await nextTick()
+    if (menu.value) disableBodyScroll(menu.value, { reserveScrollBarGap: false })
+  }
+  else if (menu.value) {
+    enableBodyScroll(menu.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  clearHoverTimer()
+  if (menu.value) enableBodyScroll(menu.value)
+})
+</script>
+
+<template>
+  <div class="relative">
+    <ul class="relative flex items-center">
+      <li
+        v-for="(nav, index) in navs"
+        :key="nav.label"
+        class="relative after:absolute after:right-0 after:top-1/2 after:h-6 after:w-px after:-translate-y-1/2 after:bg-gray-300 last:after:hidden dark:after:bg-gray-700"
+        :data-test-id="nav.dataAttribute"
+        role="listitem"
+      >
+        <button
+          type="button"
+          class="group relative cursor-pointer px-3 py-2 font-bold uppercase tracking-tight transition-colors duration-150"
+          :class="isActive(index)
+            ? 'text-blue-700 dark:text-blue-400'
+            : 'text-deepblue-900 hover:text-blue-700 dark:text-gray-200 dark:hover:text-blue-400'"
+          @mouseenter="scheduleOpen(index)"
+          @mouseleave="clearHoverTimer"
+          @click="toggleMenu(index)"
+        >
+          {{ t(nav.label) }}
+          <span
+            class="absolute inset-x-3 -bottom-0.5 h-0.5 origin-left rounded-full bg-blue-600 transition-transform duration-200 dark:bg-blue-400"
+            :class="isActive(index) ? 'scale-x-100' : 'scale-x-0 group-hover:scale-x-100'"
+          />
+        </button>
+      </li>
+    </ul>
+
+    <transition name="menu">
+      <div
+        v-if="show"
+        ref="menu"
+        class="fixed inset-x-0 z-20"
+        :style="{ top: `${menuTop}px`, height: `calc(100dvh - ${menuTop}px)` }"
+      >
+        <div
+          class="absolute inset-0 bg-gray-900/30 backdrop-blur dark:bg-black/50"
+          @click="closeMenu"
+          @mouseover="onOverlayHover"
+        />
+
+        <transition
+          :name="swapName"
+          mode="out-in"
+        >
+          <component
+            :is="currentMenu"
+            :key="currentIndex"
+            class="relative"
+          />
+        </transition>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$ease: cubic-bezier(0.22, 1, 0.36, 1);
+$shift: 24px;
+
+.menu-enter-active,
+.menu-leave-active {
+  transition:
+    opacity 0.25s $ease,
+    transform 0.25s $ease;
+}
+
+.menu-enter-from,
+.menu-leave-to {
+  opacity: 0;
+  transform: translateY(-12px);
+}
+
+.slide-next-enter-active,
+.slide-next-leave-active,
+.slide-prev-enter-active,
+.slide-prev-leave-active,
+.swap-fade-enter-active,
+.swap-fade-leave-active {
+  transition:
+    opacity 0.2s $ease,
+    transform 0.2s $ease;
+}
+
+.slide-next-enter-from {
+  opacity: 0;
+  transform: translateX($shift);
+}
+
+.slide-next-leave-to {
+  opacity: 0;
+  transform: translateX(-$shift);
+}
+
+.slide-prev-enter-from {
+  opacity: 0;
+  transform: translateX(-$shift);
+}
+
+.slide-prev-leave-to {
+  opacity: 0;
+  transform: translateX($shift);
+}
+
+.swap-fade-enter-from,
+.swap-fade-leave-to {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .menu-enter-active,
+  .menu-leave-active,
+  .slide-next-enter-active,
+  .slide-next-leave-active,
+  .slide-prev-enter-active,
+  .slide-prev-leave-active,
+  .swap-fade-enter-active,
+  .swap-fade-leave-active {
+    transition: none;
+  }
+}
+</style>