58 lines
1.0 KiB
Vue
58 lines
1.0 KiB
Vue
<script setup>
|
|
import {useUi} from "@/pinia/ui";
|
|
|
|
const emits = defineEmits(["callback"]);
|
|
const ui = useUi();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="nav-menu" id="menu-dropdown">
|
|
<div v-for="(item, key) in ui.currentMenu" :key class="item" @click="emits('callback', item)">
|
|
{{ item?.name }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.nav-menu {
|
|
width: 250px;
|
|
height: var(--navmenu-height);
|
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
|
|
background: white;
|
|
border-bottom-left-radius: 15px;
|
|
border-bottom-right-radius: 15px;
|
|
|
|
animation: fade .2s ease-in-out forwards;
|
|
overflow-y: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.item {
|
|
padding: .5em 1em;
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
|
|
transition: var(--duration);
|
|
|
|
&:hover {
|
|
color: white;
|
|
background: var(--primary);
|
|
}
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0;
|
|
height: 0
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
height: var(--navmenu-height);
|
|
}
|
|
}
|
|
</style> |