adata-ui 2.1.39 → 2.1.40-beta.1

package/components/navigation/header/NavList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { PAGES } from '#adata-ui/shared/constans/pages'
+import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
 
 interface NavList {
   title: string
@@ -13,119 +13,84 @@ const props = defineProps<{
   title: string
   link: string
   badge?: boolean
-  to: string
+  to?: string
   navList: NavList[]
   currentModule: boolean
 }>()
 
-const colorMode = useColorMode()
-
-const isDark = computed(() => colorMode.value === 'dark')
+const { isActiveService } = useActiveNavigation()
 
 function isActive(itemPath: string) {
   if (!props.currentModule) return false
-
-  const currentUrl = window.location.href.split('/').filter(item => !['kk', 'en'].includes(item)).join('/')
-  const section = PAGES[props.id]
-
-  const currentPath = itemPath.split('/').filter(item => !['kk', 'en'].includes(item)).join('/')
-
-  if (currentUrl === currentPath) return true
-
-  if (currentPath.endsWith('/')) {
-    let atLeastOne = false
-
-    for (const key in section) {
-      const path = section[key]
-      if (key !== 'main') {
-        const includes = currentUrl.includes(path) || currentUrl.includes('car-result')
-        if (includes) {
-          atLeastOne = true
-          break
-        }
-      }
-    }
-
-    return !atLeastOne
-  }
-
-  if (currentPath.includes('check-car')) {
-    if (currentUrl.includes('car-result')) {
-      return true
-    }
-  }
-
-  for (const key in section) {
-    const path = section[key]
-    if (key !== 'main') {
-      const includesBoth = currentUrl.includes(path) && currentUrl.startsWith(currentPath)
-      if (includesBoth) {
-        return true
-      }
-    }
-  }
-
-  return false
+  return isActiveService(itemPath)
 }
 </script>
 
 <template>
-  <div
-    class="flex flex-col gap-2"
-    :class="{ 'rounded-md bg-gray-50 p-2 dark:bg-gray-800': currentModule }"
+  <section
+    class="group/section overflow-hidden rounded-xl border p-3 shadow-sm transition-colors"
+    :class="currentModule
+      ? 'border-blue-700/20 bg-blue-50 hover:border-blue-700/40 dark:border-blue-500/20 dark:bg-blue-500/5 dark:hover:border-blue-500/40'
+      : 'border-gray-200 bg-white hover:border-blue-700/40 dark:border-gray-800 dark:bg-gray-950 dark:hover:border-blue-500/40'"
   >
-    <nuxt-link-locale class="flex items-center gap-2 pl-[10px] hover:text-blue-700 dark:hover:text-blue-500" :to="link">
-      <p class="text-sm font-semibold">
-        {{ title }}
-      </p>
-      <a-status-badge
-        v-if="badge"
-        type="primary"
-        class="w-fit"
-        size="xs"
-        view="inverted"
+    <div class="mb-3 flex items-start justify-between gap-2">
+      <nuxt-link-locale
+        :to="link"
+        class="group/title flex min-w-0 items-center gap-2 text-sm font-bold text-deepblue-900 transition-colors hover:text-blue-700 dark:text-gray-100 dark:hover:text-blue-500"
       >
-        NEW
-      </a-status-badge>
-    </nuxt-link-locale>
-    <ul class="flex flex-col gap-2">
+        <span
+          class="flex size-8 shrink-0 items-center justify-center rounded-lg bg-blue-700/10 text-blue-700 transition-colors group-hover/title:bg-blue-700 group-hover/title:text-white dark:bg-blue-500/10 dark:text-blue-500">
+          <component
+            :is="icon"
+            class="size-4"
+          />
+        </span>
+        <span class="block truncate normal-case">{{ title }}</span>
+      </nuxt-link-locale>
+
+      <div class="flex shrink-0 items-center gap-1">
+        <span
+          v-if="badge"
+          class="rounded-full bg-blue-700/10 px-1.5 py-0.5 text-[10px] font-bold uppercase leading-none text-blue-700 dark:bg-blue-500/10 dark:text-blue-500"
+        >NEW</span>
+        <a-icon-arrow-side-up
+          class="size-4 text-gray-500 transition-colors group-hover/section:text-blue-700 dark:group-hover/section:text-blue-500"/>
+      </div>
+    </div>
+
+    <ul class="grid gap-1">
       <li
         v-for="item in navList"
         :key="item.title"
-        class="flex w-full items-center gap-2 rounded-md px-[10px] py-[6px] hover:bg-blue-100 dark:hover:bg-gray-200/10 text-gray-600 dark:text-gray-200 hover:text-blue-700 dark:hover:text-blue-500"
-        :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
       >
-        <div class="rounded-lg p-1" :class="{ 'bg-gradient-blue-dark ': isDark, 'bg-gradient-blue-light': !isDark }">
-          <component
-            :is="item.icon"
-            class="size-[18px] text-white dark:text-gray-900"
-          />
-        </div>
         <nuxt-link-locale
           v-if="item.to"
           :to="item.to"
           itemprop="name"
-          class="inline-block normal-case w-full cursor-pointer align-middle text-sm font-semibold text-inherit hover:text-inherit"
+          class="group/item flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors hover:bg-blue-100 dark:hover:bg-gray-200/10"
+          :class="{ 'bg-blue-100 dark:bg-gray-200/10': isActive(item.to) }"
         >
-          {{ item.title }}
+          <span
+            class="flex size-7 shrink-0 items-center justify-center rounded-md transition-colors group-hover/item:bg-blue-700/10 group-hover/item:text-blue-700 dark:group-hover/item:text-blue-500"
+            :class="{
+                'bg-blue-700/10 text-blue-700 dark:bg-blue-500/10 dark:text-blue-500': isActive(item.to),
+                'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-300': !isActive(item.to),
+                // 'bg-white text-gray-600 dark:bg-white dark:text-gray-300': currentModule,
+            }"
+          >
+            <component
+              :is="item.icon"
+              class="size-[14px]"
+            />
+          </span>
+          <span
+            class="truncate text-sm font-semibold normal-case transition-colors group-hover/item:text-deepblue-900 dark:group-hover/item:text-gray-100"
+            :class="isActive(item.to)
+              ? 'text-blue-700 dark:text-blue-500'
+              : 'text-gray-600 dark:text-gray-300'"
+          >{{ item.title }}</span>
         </nuxt-link-locale>
-        <div
-          v-else
-          class="inline-block w-full align-middle text-sm font-semibold text-gray-600 dark:text-gray-200"
-        >
-          {{ item.title }}
-        </div>
       </li>
     </ul>
-  </div>
+  </section>
 </template>
-
-<style scoped lang="scss">
-.bg-gradient-blue-dark {
-  background: linear-gradient(236.46deg, #4FBDFF -2.39%, #1B98E2 79.1%);
-}
-
-.bg-gradient-blue-light {
-  background: linear-gradient(236.46deg, #479FFF -2.39%, #0070EB 79.1%);
-}
-</style>

package/components/navigation/header/ProductMenu.vue

@@ -1,146 +1,98 @@
 <script setup lang="ts">
-import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import NavList from '#adata-ui/components/navigation/header/NavList.vue'
 import CardGallery from '#adata-ui/components/navigation/header/CardGallery.vue'
+import NavList from '#adata-ui/components/navigation/header/NavList.vue'
+import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
+import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
 
-const props = withDefaults(
-  defineProps<{
-    animation?: string
-    index?: number
-    url?: string
-  }>(),
-  {
-    animation: 'next',
-    index: 0,
-    url: ''
-  }
-)
-
+defineProps<{ url?: string }>()
 defineEmits(['outerClick', 'mouseOver'])
 
-const pageUrl = useRequestURL()
-const filteredItems = useHeaderNavigationLinks()
+const { t } = useI18n()
+const modules = useHeaderNavigationLinks()
+const { isActiveModule } = useActiveNavigation()
 
-function isCurrentModule(currentModule: string) {
-  if (currentModule === 'fines') return 'avto'
-  if (currentModule === 'analytics') return 'analytics'
-  if (currentModule === 'compliance') return 'ac'
-  if (currentModule === 'fea') return 'tnved'
-  if (currentModule === 'tenders') return 'zakupki'
+// Fixed EDO promo card on the left (like edo-editor); EDO is excluded from the catalog grid below.
+const edoModule = computed(() => modules.value.find(module => module.key === 'edo') ?? null)
 
-  return currentModule
-}
+const COLUMN_KEYS = [['pk', 'fines', 'work'], ['fea', 'tenders'], ['compliance', 'analytics']]
+const catalogColumns = computed(() =>
+  COLUMN_KEYS.map(keys =>
+    keys
+      .map(key => modules.value.find(module => module.key === key))
+      .filter((module): module is NonNullable<typeof module> => module !== undefined),
+  ),
+)
 </script>
 
 <template>
   <div class="capitalize">
     <div class="relative bg-white dark:bg-gray-950">
-      <transition :name="animation">
-        <div
-          :key="index"
-          class="a-container py-8"
-        >
-          <div class="flex justify-between gap-5">
-            <div class="flex gap-[10px] divide-x divide-gray-500/50">
-              <div class="flex flex-col gap-5 w-[290px]">
-                <nav-list
-                  v-for="module in filteredItems.slice(0,3)"
-                  :id="module.key"
-                  :key="module.key"
-                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
-                  :title="module.name"
-                  :link="module.link"
-                  :nav-list="module.items"
-                  :to="module.to"
-                  :icon="module.icon"
-                  :badge="module.is_new"
-                  :data-test-id="module.data_attribute"
-                />
-              </div>
-              <div class="flex flex-col gap-5 w-[290px] pl-[10px]">
-                <nav-list
-                  v-for="module in filteredItems.slice(3,5)"
-                  :id="module.key"
-                  :key="module.key"
-                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
-                  :title="module.name"
-                  :link="module.link"
-                  :nav-list="module.items"
-                  :to="module.to"
-                  :icon="module.icon"
-                  :badge="module.is_new"
-                  :data-test-id="module.data_attribute"
-                />
-              </div>
-              <div class="flex flex-col gap-5 w-[330px] pl-[10px]">
-                <nav-list
-                  v-for="module in filteredItems.slice(5,8)"
-                  :id="module.key"
-                  :key="module.key"
-                  :current-module="pageUrl.hostname.startsWith(isCurrentModule(module.key))"
-                  :title="module.name"
-                  :link="module.link"
-                  :nav-list="module.items"
-                  :to="module.to"
-                  :icon="module.icon"
-                  :badge="module.is_new"
-                  :data-test-id="module.data_attribute"
-                />
+      <div class="a-container max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain py-8">
+        <div class="flex justify-between gap-5">
+          <!-- Left sidebar: EDO promo card (edo-editor style) + promo carousel. -->
+          <aside class="flex w-[320px] shrink-0 flex-col gap-5">
+            <nuxt-link-locale
+              v-if="edoModule"
+              :to="edoModule.link"
+              class="group block overflow-hidden rounded-xl border border-blue-700/20  p-4 shadow-sm transition-colors hover:border-blue-700/40 hover:bg-blue-100 dark:border-blue-500/20  dark:hover:border-blue-500/40 dark:hover:bg-blue-500/10"
+              :data-test-id="edoModule.data_attribute"
+            >
+              <div class="flex items-start gap-3">
+                <div
+                  class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-blue-700 text-white shadow-sm">
+                  <component
+                    :is="edoModule.icon"
+                    class="size-5"
+                  />
+                </div>
+                <div class="min-w-0">
+                  <div class="flex items-center justify-between gap-2">
+                    <h3 class="text-base font-bold normal-case text-deepblue-900 dark:text-gray-100">
+                      {{ edoModule.name }}
+                    </h3>
+                    <div class="flex items-center gap-1 justify-end">
+                      <span
+                        v-if="edoModule.is_new"
+                        class="rounded-full bg-blue-700/10 px-1.5 py-0.5 text-[10px] font-bold uppercase leading-none text-blue-700 dark:bg-blue-500/10 dark:text-blue-500"
+                      >NEW</span>
+                      <a-icon-arrow-side-up
+                        class="size-4 text-gray-500 transition group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-blue-700 dark:text-gray-400 dark:group-hover:text-blue-500"/>
+                    </div>
+                  </div>
+                  <p class="mt-1 text-sm normal-case leading-snug text-gray-600 dark:text-gray-300">
+                    {{ t('header.products.edo.heroSubtitle') }}
+                  </p>
+                </div>
               </div>
+            </nuxt-link-locale>
+
+            <card-gallery class="hidden lg:block"/>
+          </aside>
+
+          <!-- Catalog grid: products as bordered section cards (EDO lives in the hero). -->
+          <div class="grid min-w-0 flex-1 grid-cols-3 gap-3">
+            <div
+              v-for="(column, index) in catalogColumns"
+              :key="index"
+              class="flex flex-col gap-3"
+            >
+              <nav-list
+                v-for="module in column"
+                :id="module.key"
+                :key="module.key"
+                :current-module="isActiveModule(module)"
+                :title="module.name"
+                :link="module.link"
+                :nav-list="module.items"
+                :to="module.to"
+                :icon="module.icon"
+                :badge="module.is_new"
+                :data-test-id="module.data_attribute"
+              />
             </div>
-            <card-gallery class="hidden xl:block" />
           </div>
         </div>
-      </transition>
-      <button
-        class="absolute right-8 top-4"
-        @click="$emit('outerClick')"
-      >
-        <a-icon-x-mark
-          width="32"
-          height="32"
-        />
-      </button>
+      </div>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-$percent: 30%;
-.next-enter-from,
-.next-leave-to {
-  opacity: 0;
-  transform: translateX($percent);
-  position: absolute;
-}
-
-.next-enter-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.next-leave-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  opacity: 0;
-  transform: translateX(-$percent);
-}
-
-// Backwards transition
-
-.prev-enter-from,
-.prev-leave-to {
-  position: absolute;
-
-  opacity: 0;
-  transform: translateX(-$percent);
-}
-
-.prev-enter-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.prev-leave-active {
-  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  opacity: 0;
-  transform: translateX($percent);
-}
-</style>