VberAdminPlusV3/UI/VAP_V3.VUE/src/layouts/main/header/menu/MenuPages.vue

<script lang="ts" setup>
import { useRoute } from "vue-router"
import appStore from "@s"
import { headerMenuIcons } from "@@/config/theme"

const menus = computed(() => {
	return appStore.menuStore.getSidebarMenus()
})
const route = useRoute()

const hasActiveChildren = (match: string) => {
	return route.path.includes(match)
}
</script>

<template>
	<template v-for="(item, i) in menus" :key="i">
		<template v-if="!item.heading">
			<template v-for="(menuItem, j) in item.pages" :key="j">
				<div v-if="menuItem.heading" class="menu-item me-lg-1">
					<router-link
						v-if="menuItem.route"
						class="menu-link"
						:to="menuItem.route"
						active-class="active">
						<span class="menu-title">{{ menuItem.heading }}</span>
					</router-link>
				</div>
			</template>
		</template>
		<div
			v-if="item.heading"
			data-vb-menu-trigger="click"
			data-vb-menu-placement="bottom-start"
			class="menu-item menu-lg-down-accordion me-lg-1">
			<span
				v-if="item.route"
				class="menu-link py-3"
				:class="{ active: hasActiveChildren(item.route) }">
				<span class="menu-title">{{ item.heading }}</span>
				<span class="menu-arrow d-lg-none"></span>
			</span>
			<div
				class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-rounded-0 py-lg-4 w-lg-225px">
				<template v-for="(menuItem, j) in item.pages" :key="j">
					<div
						v-if="menuItem.sectionTitle"
						data-vb-menu-trigger="{default:'click', lg: 'hover'}"
						data-vb-menu-placement="right-start"
						class="menu-item menu-lg-down-accordion">
						<span
							v-if="menuItem.route"
							class="menu-link py-3"
							:class="{ active: hasActiveChildren(menuItem.route) }">
							<span class="menu-icon">
								<i
									v-if="headerMenuIcons === 'bootstrap'"
									:class="menuItem.bootstrapIcon"
									class="bi fs-3"></i>
								<VbIcon
									v-if="headerMenuIcons === 'keenthemes'"
									:icon-name="menuItem.keenthemesIcon"
									icon-class="fs-2" />
							</span>
							<span class="menu-title">{{ menuItem.sectionTitle }}</span>
							<span class="menu-arrow"></span>
						</span>
						<div
							class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg py-lg-4 w-lg-225px">
							<template v-for="(menuItem1, k) in menuItem.sub" :key="k">
								<div
									v-if="menuItem1.sectionTitle"
									data-vb-menu-trigger="{default:'click', lg: 'hover'}"
									data-vb-menu-placement="right-start"
									class="menu-item menu-lg-down-accordion">
									<span
										v-if="menuItem1.route"
										class="menu-link py-3"
										:class="{ active: hasActiveChildren(menuItem1.route) }">
										<span class="menu-bullet">
											<span class="bullet bullet-dot"></span>
										</span>
										<span class="menu-title">{{ menuItem1.sectionTitle }}</span>
										<span class="menu-arrow"></span>
									</span>
									<div
										class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown menu-active-bg py-lg-4 w-lg-225px">
										<template v-for="(menuItem2, l) in menuItem1.sub" :key="l">
											<div class="menu-item">
												<router-link
													v-if="menuItem2.route && menuItem2.heading"
													class="menu-link py-3"
													active-class="active"
													:to="menuItem2.route">
													<span class="menu-bullet">
														<span class="bullet bullet-dot"></span>
													</span>
													<span class="menu-title">{{ menuItem2.heading }}</span>
												</router-link>
											</div>
										</template>
									</div>
								</div>
								<div v-if="menuItem1.heading" class="menu-item">
									<router-link
										v-if="menuItem1.route"
										class="menu-link"
										active-class="active"
										:to="menuItem1.route">
										<span class="menu-bullet">
											<span class="bullet bullet-dot"></span>
										</span>
										<span class="menu-title">{{ menuItem1.heading }}</span>
									</router-link>
								</div>
							</template>
						</div>
					</div>
					<div v-if="menuItem.heading" class="menu-item">
						<router-link
							v-if="menuItem.route && menuItem.route"
							class="menu-link"
							active-class="active"
							:to="menuItem.route">
							<span class="menu-icon">
								<VbIcon icon-name="element-8" icon-class="fs-2" />
							</span>
							<span class="menu-title">{{ menuItem.heading }}</span>
						</router-link>
					</div>
				</template>
			</div>
		</div>
	</template>
</template>