84 lines
1.8 KiB
Vue
84 lines
1.8 KiB
Vue
<template>
|
|
<li class="nav-item" :class="item.class?item.class:''">
|
|
|
|
<div class="demo-space-x">
|
|
<VMenu transition="scale-transition">
|
|
<template #activator="{ props }">
|
|
<Component
|
|
:is="itemIcon(item)"
|
|
v-if="!hideTitleAndIcon && item.icon"
|
|
:class="itemIconClass(item)"
|
|
/>
|
|
<VBtn v-bind="props" block >
|
|
<VIcon v-if="item.icon" :icon="item.icon.icon" class="mr-2" />{{ item.title }}
|
|
</VBtn>
|
|
</template>
|
|
|
|
<VList class="list-reset">
|
|
<VListItem
|
|
v-for="(child, index) in item.children"
|
|
:key="index"
|
|
class="list-item-reset"
|
|
>
|
|
|
|
<VerticalNavLink :item="child" :hideTitleAndIcon="hideTitleAndIcon" :class="item.class" />
|
|
</VListItem>
|
|
</VList>
|
|
</VMenu>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import VerticalNavLink from './VerticalNavLink.vue';
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
hideTitleAndIcon: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
hideMarker: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
})
|
|
|
|
const itemIcon = (item) => {
|
|
return item.icon.icon ? item.icon.icon : ''
|
|
}
|
|
|
|
const itemIconClass = (item) => {
|
|
return item.icon ? item.icon.class : ''
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
|
|
|
|
.list-reset {
|
|
list-style: none; /* Removes bullets or numbers from the list */
|
|
padding: 0; /* Removes default padding */
|
|
margin: 0px; /* Removes default margin */
|
|
}
|
|
|
|
.list-item-reset {
|
|
list-style: none; /* Ensures each list item has no bullets or numbers */
|
|
padding: 0; /* Removes default padding */
|
|
margin: 0px; /* Removes default margin */
|
|
}
|
|
.nav-item > .v-menu {
|
|
width: 100%; /* Ensures the menu takes the full width */
|
|
}
|
|
.bottom-end button {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 20px;
|
|
}
|
|
|
|
|
|
</style>
|