forked from geolba/tethys.backend
105 lines
3.4 KiB
Vue
105 lines
3.4 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { Link } from '@inertiajs/vue3';
|
|
// import { Link } from '@inertiajs/inertia-vue3';
|
|
|
|
import { StyleService } from '@/Stores/style';
|
|
import { mdiMinus, mdiPlus } from '@mdi/js';
|
|
import { getButtonColor } from '@/colors.js';
|
|
import BaseIcon from '@/Components/BaseIcon.vue';
|
|
import AsideMenuList from '@/Components/AsideMenuList.vue';
|
|
import { stardust } from '@eidellev/adonis-stardust/client';
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
isDropdownList: Boolean,
|
|
});
|
|
|
|
const itemRoute = computed(() => (props.item && props.item.route ? stardust.route(props.item.route) : ''));
|
|
// const isCurrentRoute = computed(() => (props.item && props.item.route ? stardust.isCurrent(props.item.route): false));
|
|
const itemHref = computed(() => (props.item && props.item.href ? props.item.href : ''));
|
|
|
|
const emit = defineEmits(['menu-click']);
|
|
|
|
const styleService = StyleService();
|
|
|
|
const hasColor = computed(() => props.item && props.item.color);
|
|
|
|
const isDropdownActive = ref(false);
|
|
|
|
const componentClass = computed(() => [
|
|
props.isDropdownList ? 'py-3 px-6 text-sm font-semibold' : 'py-3 px-6',
|
|
hasColor.value ? getButtonColor(props.item.color, false, true) : styleService.asideMenuItemStyle,
|
|
]);
|
|
|
|
const hasDropdown = computed(() => props.item.children);
|
|
|
|
const menuClick = (event) => {
|
|
emit('menu-click', event, props.item);
|
|
|
|
if (hasDropdown.value) {
|
|
isDropdownActive.value = !isDropdownActive.value;
|
|
}
|
|
};
|
|
|
|
const activeInactiveStyle = computed(() => {
|
|
if (props.item.route && stardust.isCurrent(props.item.route)) {
|
|
// console.log(props.item.route);
|
|
return styleService.asideMenuItemActiveStyle;
|
|
} else {
|
|
return null;
|
|
}
|
|
});
|
|
|
|
const is = computed(() => {
|
|
if (props.item.href) {
|
|
return 'a';
|
|
}
|
|
if (props.item.route) {
|
|
return Link;
|
|
}
|
|
|
|
return 'div';
|
|
});
|
|
|
|
// props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null
|
|
</script>
|
|
|
|
<!-- :target="props.item.target ?? null" -->
|
|
<template>
|
|
<li>
|
|
<!-- <component :is="itemHref ? 'div' : Link" :href="itemHref ? itemHref : itemRoute" -->
|
|
<component
|
|
:is="is"
|
|
:href="itemRoute ? stardust.route(props.item.route) : props.item.href"
|
|
class="flex cursor-pointer dark:text-slate-300 dark:hover:text-white"
|
|
:class="componentClass"
|
|
@click="menuClick"
|
|
v-bind:target="props.item.target ?? null"
|
|
>
|
|
<BaseIcon v-if="item.icon" :path="item.icon" class="flex-none" :class="activeInactiveStyle" w="w-16" :size="18" />
|
|
<span class="grow text-ellipsis line-clamp-1" :class="activeInactiveStyle">
|
|
{{ item.label }}
|
|
</span>
|
|
<!-- plus icon for expanding sub menu -->
|
|
<BaseIcon
|
|
v-if="hasDropdown"
|
|
:path="isDropdownActive ? mdiMinus : mdiPlus"
|
|
class="flex-none"
|
|
:class="activeInactiveStyle"
|
|
w="w-12"
|
|
@click.prevent="menuClick"
|
|
/>
|
|
</component>
|
|
<AsideMenuList
|
|
v-if="hasDropdown"
|
|
:menu="item.children"
|
|
:class="[styleService.asideMenuDropdownStyle, isDropdownActive ? 'block dark:bg-slate-800/50' : 'hidden']"
|
|
is-dropdown-list
|
|
/>
|
|
</li>
|
|
</template>
|