primevue-mirror/apps/volt/components/app/AppMenuItem.vue

57 lines
2.2 KiB
Vue
Raw Normal View History

2025-02-28 11:49:42 +00:00
<template>
<li v-for="(menuitem, index) in menu" :key="`_root${index}`">
<button v-if="menuitem.children && root" v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-slidedown', leaveToClass: 'hidden', leaveActiveClass: 'animate-slideup' }" type="button">
<span class="menu-icon">
<i :class="menuitem.icon"></i>
</span>
<span>{{ menuitem.name }}</span>
<i class="menu-toggle-icon pi pi-angle-down"></i>
</button>
<a v-if="menuitem.href" :href="menuitem.href" target="_blank" rel="noopener noreferrer">
<span v-if="menuitem.icon && root" class="menu-icon">
<i :class="menuitem.icon"></i>
</span>
<span>{{ menuitem.name }}</span>
<Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
</a>
<PrimeVueNuxtLink v-if="menuitem.to" :to="menuitem.to" :class="{ 'router-link-active': menuitem.to === $route.fullPath }">
<span v-if="menuitem.icon && root" class="menu-icon">
<i :class="menuitem.icon"></i>
</span>
<span>{{ menuitem.name }}</span>
<Tag v-if="menuitem.badge" :value="menuitem.badge"></Tag>
</PrimeVueNuxtLink>
<span v-if="!root && menuitem.children" class="menu-child-category">{{ menuitem.name }}</span>
<div v-if="menuitem.children" :class="{ hidden: menuitem.children && root && isActiveRootmenuItem(menuitem) }">
<ol>
<AppMenuItem :root="false" :menu="menuitem.children"></AppMenuItem>
</ol>
</div>
</li>
</template>
2025-03-11 08:14:17 +00:00
<script setup>
import Tag from '@/volt/tag';
2025-03-11 08:14:17 +00:00
import { useRouter } from 'vue-router';
2025-03-11 08:14:17 +00:00
const props = defineProps({
root: {
type: Boolean,
default: true
2025-02-28 11:49:42 +00:00
},
2025-03-11 08:14:17 +00:00
menu: {
type: Object,
default: null
2025-02-28 11:49:42 +00:00
}
2025-03-11 08:14:17 +00:00
});
const router = useRouter();
const isActiveRootmenuItem = (menuitem) => {
return menuitem.children && !menuitem.children.some((item) => item.to === `/${router.currentRoute.value?.name?.replaceAll('-', '/')}` || (item.children && item.children.some((it) => it.to === `/${router.currentRoute.value.name}`)));
2025-02-28 11:49:42 +00:00
};
</script>