42 lines
1.2 KiB
Vue
42 lines
1.2 KiB
Vue
<script lang="ts" setup>
|
|
type Entry = {
|
|
title: string,
|
|
url: boolean,
|
|
to: string,
|
|
}
|
|
defineProps<{
|
|
title: string
|
|
icon: string[]
|
|
entry: Entry[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container relative w-16 max-w-max flex-auto shrink-0 cursor-pointer
|
|
group hover:w-full hover:bg-gray-200">
|
|
<div class="flex h-16 items-center pr-4 pl-2">
|
|
<font-awesome-icon :icon="icon" class="mx-2 h-8 w-8"/>
|
|
<span class="w-0 max-w-max overflow-hidden text-xl transition-all duration-300
|
|
text-nowrap group-hover:w-full">
|
|
{{ title }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 下拉菜单 -->
|
|
<div v-if="entry"
|
|
class="invisible absolute top-full left-1/2 overflow-hidden rounded-xl bg-white
|
|
bg-opacity-70 opacity-0 shadow-md backdrop-blur-md transition-all duration-300
|
|
min-w-32 item group-hover:visible group-hover:-translate-x-1/2 group-hover:opacity-100">
|
|
<div v-for="item in entry" :key="item.title" class="py-2 text-center text-lg text-gray-500 hover:bg-gray-100">
|
|
{{ item.title }}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.item {
|
|
transform: perspective(500px) rotateX(-45deg) translateX(-50%);
|
|
}
|
|
</style> |