fashion-ssr-vue3/components/common/navigation/index.vue

<!-- @format -->

<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import IconGroup from './icon-group.vue'
import { useCommonStore } from '@/stores/modules/common'
import { Api } from '@/api/model/url'

const router = useRouter()
const commonStore = useCommonStore()
const { navigateTextColor, navigateBgColor } = storeToRefs(commonStore)

const catalogsVisible = ref<boolean>(false)
const resourceVisible = ref<boolean>(false)
const aboutVisible = ref<boolean>(false)
const list = ref<any>([])
const TrendList = ref<any>([])

const requestUrl = `${process.env.MY_ENV_DEV_URL}${Api.CategoryList}`
const { data: res } = await useAsyncData(
  'category-catalogue',
  () => $fetch(`${requestUrl}`, { params: { all: true } }),
)
const params = { pageNo: 1, pageSize: 3, state: true, trend: 0, order: 'desc' }
const { data: res2 } = await useAsyncData(
  'catalogue-list',
  () => $fetch(`${process.env.MY_ENV_DEV_URL}${Api.CatalogueList}`, { params }),
)
list.value = res.value?.result || []
TrendList.value = res2.value?.result?.records || []

function toCategories() {
  router.push('/categories')
}
</script>

<template>
  <div class="flex gap-80px">
    <NuxtLink
      to="/solutions"
      class="!hover:text-#9B6CFF cursor-pointer"
      :style="{
        color: navigateTextColor,
      }"
    >
      Solutions
    </NuxtLink>
    <el-dropdown
      popper-class="custom-navigate-dropdown2"
      @visible-change="(visible) => (catalogsVisible = visible)"
    >
      <span
        class="el-dropdown-link text-16px flex items-center"
        :class="[{ '!text-#9B6CFF': catalogsVisible }]"
        :style="{
          color: navigateTextColor,
        }"
        @click.stop="toCategories"
      >
        Catalogs
        <el-icon
          class="el-icon--right custom-arrow"
          :class="catalogsVisible ? 'custom-arrow-up' : 'custom-arrow-down'"
        >
          <ArrowDown class="text-14px" />
        </el-icon>
      </span>
      <template #dropdown>
        <div class="w-1200px p-30px flex  justify-center">
          <div class="pr-10px">
            <div class="mb-20px text-16px fw-800 text-#333">
              By Category
            </div>
            <div class="grid grid-cols-2 grid-gap-x-15px grid-gap-y-10px">
              <div v-for="(item, index) in list" :key="item.id" class="a-link-out hover:text-#9B6CFF hover:bg-#F3F4FB py-8px pl-10px b-rd-6px flex items-center cursor-pointer text-#999">
                <IconGroup :icon="`${index}`" />
                <NuxtLink
                  :to="`/categories/${item.slug}`"
                  class="text-#333 ml-10px text-14px"
                >
                  {{ item.title }}
                </NuxtLink>
              </div>
            </div>
          </div>
          <div v-if="TrendList.length" class="pl-30px b-l-1px b-l-solid b-l-#E0E4EA">
            <div class="mb-20px text-16px fw-800 text-#333">
              By Category
            </div>
            <div class="grid grid-cols-3 grid-gap-x-20px">
              <div
                v-for="(item, index) in TrendList"
                :key="index"
                class="cursor-pointer"
              >
                <NuxtLink
                  :to="`/blog/${item.blogSlug}`"
                >
                  <img
                    :src="item.coverImg"
                    :alt="item.coverAlt"
                    class="w-220px h-136px object-cover mb-10px b-rd-4px"
                  >
                  <div class="text-14px fw-800 custom-title-font text-#333 line-clamp-1">
                    {{ item.title }}
                  </div>
                </NuxtLink>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-dropdown>
    <el-dropdown
      popper-class="custom-navigate-dropdown"
      @visible-change="(visible) => (resourceVisible = visible)"
    >
      <span
        class="el-dropdown-link text-16px flex items-center"
        :class="[{ '!text-#9B6CFF': resourceVisible }]"
        :style="{
          color: navigateTextColor,
        }"
      >
        Resources
        <el-icon
          class="el-icon--right custom-arrow"
          :class="resourceVisible ? 'custom-arrow-up' : 'custom-arrow-down'"
        >
          <ArrowDown class="text-14px" />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <NuxtLink to="/blog">
              Blog
            </NuxtLink>
          </el-dropdown-item>
          <el-dropdown-item>
            <NuxtLink to="/faq">
              FAQ
            </NuxtLink>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown
      popper-class="custom-navigate-dropdown"
      @visible-change="(visible) => (aboutVisible = visible)"
    >
      <span
        class="el-dropdown-link text-16px flex items-center"
        :class="[{ '!text-#9B6CFF': aboutVisible }]"
        :style="{
          color: navigateTextColor,
        }"
      >
        About
        <el-icon
          class="el-icon--right custom-arrow"
          :class="aboutVisible ? 'custom-arrow-up' : 'custom-arrow-down'"
        >
          <ArrowDown class="text-14px" />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <NuxtLink to="/about-us">
              About Us
            </NuxtLink>
          </el-dropdown-item>
          <el-dropdown-item>
            <NuxtLink to="/contact">
              Contact Us
            </NuxtLink>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<style lang="less" scoped>
.custom-arrow {
  transition: all 0.3s ease-in-out;
}
.custom-arrow-up {
  transform: rotate(180deg);
}
.custom-arrow-down {
  transform: rotate(0deg);
}
.a-link-out:hover a{
  color: #9B6CFF;
}
</style>

<style lang="less">
.custom-navigate-color {
  color: #fff;
}
.custom-navigate-dropdown2{
  margin-top: 14px;
  padding:0px!important;
  border-width: 0px!important;
  background-color: #fff!important;
  opacity: 0.9;
  border-radius: 6px!important;
  inset: unset!important;
  left:  calc(50vw - 600px) !important;
  top:58px!important;
   backdrop-filter: blur(5px)!important;
   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1)!important;
  .el-popper__arrow {
        display: none;
  }
}
</style>