WebIndex/components/nav/NavBarEntryItem.vue

<script lang="ts" setup>
const router = useRouter()
type Entry = {
  title: string
  url: boolean
  to: string
}

const emit = defineEmits<{
  (e: 'onGo'): void
}>()

defineProps<{
  title: string
  icon: string[]
  to?: string
  entry: Entry[]
}>()

const onClick = (to: string | undefined, url: boolean) => {
  if (to === undefined) { return }

  if (url) { window.open(to) }
  emit('onGo')
  router.push({ name: to })
}
</script>

<template>
  <div
    class="container relative w-full max-w-max flex-auto shrink-0 cursor-pointer group md:w-16 md:hover:w-full"
    @click="onClick(to, false)"
  >
    <div
      class="my-1 flex h-14 w-screen items-center rounded-md pr-4 pl-2 text-gray-500
             md:w-auto md:text-white md:group-hover:bg-gray-100 md:group-hover:bg-opacity-30"
    >
      <font-awesome-icon
        :icon="icon"
        class="mx-2 h-5 w-5 md:h-8 md:w-8"
      />
      <span
        class="w-full max-w-max overflow-hidden text-lg transition-all duration-300 text-nowrap font-bold
               md:font-normal md:w-0 md:text-xl md:group-hover:w-full"
      >
        {{ title }}
      </span>
    </div>

    <!-- 下拉菜单 -->
    <div
      v-if="entry"
      class="grid grid-cols-2 overflow-hidden transition-all duration-300 min-w-32 item md:invisible md:absolute
             md:top-full md:left-1/2 md:block md:rounded-xl md:bg-white md:opacity-0 md:shadow-md
             md:group-hover:visible md:group-hover:-translate-x-1/2 md:group-hover:opacity-100"
    >
      <div
        v-for="item in entry"
        :key="item.title"
        class="px-11 py-2 text-gray-500 text-md md:px-0 md:text-center md:text-lg md:hover:bg-gray-100"
        @click="onClick(item.to, item.url)"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item {
  @media (min-width: 768px) {
    transform: perspective(500px) rotateX(-45deg) translateX(-50%);
  }
}
</style>