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'

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>([
  {
    key: 'trend',
    name: 'Trend Toys',
  },
  {
    key: 'tech',
    name: 'Tech Gadgets',
  },
  {
    key: 'lifeStyle',
    name: 'Lifestyle & Wellness',
  },
  {
    key: 'stationery',
    name: 'Stationery & Office',
  },
  {
    key: 'fashion',
    name: 'Fashion Accessories',
  },
  {
    key: 'gifts',
    name: 'Gifts & Seasonal',
  },
  {
    key: 'creative',
    name: 'Creative Home Products',
  },
  {
    key: 'beauty',
    name: 'Beauty & Persoanl Care',
  },
])
const TrendList = [
  {
    image: 'https://picsum.photos/220/136',
    name: 'Trend Toys',
    slug: 'trend-toys',
    id: 'trend-toys',
  },
  {
    image: 'https://picsum.photos/220/136',
    name: 'Trend Toys',
    slug: 'trend-toys',
    id: 'trend-toys',
  },
  {
    image: 'https://picsum.photos/220/136',
    name: 'Trend Toys',
    slug: 'trend-toys',
    id: 'trend-toys',
  },
]

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 items-center justify-center">
          <div class="pr-10px  b-r-1px b-r-solid b-r-#E0E4EA">
            <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="item.key" />
                <NuxtLink
                  :to="`/categories/${item.id}`"
                  class="text-#333 ml-10px text-14px"
                >
                  {{ item.name }}
                </NuxtLink>
              </div>
            </div>
          </div>
          <div class="pl-30px">
            <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="`/categories/${item.slug}`"
                >
                  <img
                    :src="item.image"
                    alt=""
                    class="w-220px h-136px mb-10px b-rd-4px"
                  >
                  <div class="text-14px fw-800 custom-title-font text-#333 line-clamp-1">
                    {{ item.name }}
                  </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: 50%!important;
  top:58px!important;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%);
   backdrop-filter: blur(5px)!important;
   box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1)!important;
  .el-popper__arrow {
        display: none;
  }
}
</style>