110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
<template>
|
|
<div
|
|
class="border-l-4"
|
|
:class="{
|
|
'border-green-600': isActive,
|
|
'hover:bg-gray-700 border-transparent': !isActive
|
|
}">
|
|
<div class="flex w-full" @click="toggleExpanded">
|
|
<RouterLink
|
|
:to="to"
|
|
class="flex-grow px-4 py-2 flex items-center"
|
|
:class="{
|
|
'text-green-600 bg-gray-800': isActive
|
|
}">
|
|
<div class="flex items-center flex-grow">
|
|
<component :is="icon" class="w-5 h-5 mr-3" />
|
|
<span class="px-2">{{ text }}</span>
|
|
</div>
|
|
<component
|
|
v-if="subItems.length > 0"
|
|
:is="expanded ? ChevronUpIcon : ChevronDownIcon"
|
|
class="w-4 h-4" />
|
|
</RouterLink>
|
|
</div>
|
|
|
|
<ul v-if="subItems.length > 0" class="ml-8 mt-2 space-y-4" v-show="expanded">
|
|
<SubMenuItem
|
|
v-for="(subItem, index) in subItems"
|
|
:key="index"
|
|
:text="subItem.text"
|
|
:to="subItem.to"
|
|
@click="subItem.onClick" />
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch, computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/outline';
|
|
import SubMenuItem from './SubMenuItem.vue';
|
|
import { useMenuStore } from '../../../stores/menuStore';
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
icon: {
|
|
type: Function,
|
|
required: true
|
|
},
|
|
text: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
to: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
subItems: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
});
|
|
|
|
const menuStore = useMenuStore();
|
|
const expanded = ref(false);
|
|
const route = useRoute();
|
|
|
|
|
|
const isActive = computed(() => {
|
|
if (!props.to) {
|
|
return props.subItems?.some(subItem => route.path === subItem.to) || false;
|
|
}
|
|
|
|
if (props.to === '/') {
|
|
return route.path === props.to || props.subItems.map(item => item.to).includes(route.path);
|
|
}
|
|
|
|
return route.path.startsWith(props.to);
|
|
});
|
|
|
|
const isRouteMatching = path => {
|
|
return props.subItems.some(item => path.startsWith(item.to)) || path === props.to;
|
|
};
|
|
|
|
watch(
|
|
[() => route.path, () => menuStore.activeMenuId],
|
|
([newPath, newMenuId]) => {
|
|
if (isRouteMatching(newPath)) {
|
|
expanded.value = true;
|
|
menuStore.setActiveMenu(props.id);
|
|
} else if (newMenuId !== props.id) {
|
|
expanded.value = false;
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
const toggleExpanded = () => {
|
|
if (expanded.value) {
|
|
menuStore.setActiveMenu(null);
|
|
} else {
|
|
menuStore.setActiveMenu(props.id);
|
|
}
|
|
expanded.value = !expanded.value;
|
|
};
|
|
</script>
|