83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: null,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const isDropdownOpen = ref(false);
|
|
|
|
const toggleDropdown = () => {
|
|
isDropdownOpen.value = !isDropdownOpen.value;
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<li class="nav-link" :class="{ disabled: item.disabled, open: isDropdownOpen }">
|
|
<Component :is="item.to ? 'RouterLink' : 'a'" :to="item.to" :href="item.href"
|
|
@click.prevent="item.children && toggleDropdown()">
|
|
<VIcon :icon="item.icon" class="nav-item-icon" />
|
|
<span class="nav-item-title">{{ item.title }}</span>
|
|
<VIcon v-if="item.children" :icon="isDropdownOpen ? 'mdi-chevron-up' : 'mdi-chevron-down'"
|
|
class="dropdown-icon" />
|
|
</Component>
|
|
|
|
<transition name="dropdown-transition">
|
|
<ul v-if="item.children && isDropdownOpen" class="dropdown-menu1">
|
|
<li v-for="(child, index) in item.children" :key="index">
|
|
<VerticalNavLink :item="child">
|
|
<template #default="{ item }">
|
|
<VIcon :icon="item.icon" class="nav-item-icon" />
|
|
<span class="nav-item-title">{{ item.title }}</span>
|
|
</template>
|
|
</VerticalNavLink>
|
|
</li>
|
|
</ul>
|
|
</transition>
|
|
</li>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.layout-vertical-nav {
|
|
.nav-link a {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-link {
|
|
color: rgb(var(--v-theme-yellow-theme-button)) !important;
|
|
}
|
|
|
|
.dropdown-menu1 {
|
|
padding-left: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown-icon {
|
|
margin-left: auto;
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
.nav-link.open .dropdown-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
|
|
.dropdown-transition-enter-active,
|
|
.dropdown-transition-leave-active {
|
|
transition: max-height 0.3s ease-in-out;
|
|
max-height: 200px;
|
|
/* Adjust this value based on the maximum height of your dropdown menu */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dropdown-transition-enter-from,
|
|
.dropdown-transition-leave-to {
|
|
max-height: 0;
|
|
}
|
|
</style>
|