tethys.backend/resources/js/Components/AsideMenuItem.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.prevent="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>