tethys.backend/resources/js/Components/NavBarItem.vue

<script setup>
import { StyleService } from '@/Stores/style';
// import { Link } from '@inertiajs/vue3'
import { Link } from '@inertiajs/vue3';
import { computed } from 'vue';
import { stardust } from '@eidellev/adonis-stardust/client';

const props = defineProps({
    href: {
        type: String,
        default: null,
    },
    routeName: {
        type: String,
        default: null,
    },
    param: {
        type: Number,
    },
    type: {
        type: String,
        default: 'flex',
    },
    activeColor: {
        type: String,
        default: null,
    },
    isDesktopIconOnly: Boolean,
    dropdown: Boolean,
    active: Boolean,
});

const is = computed(() => {
    if (props.href) {
        return 'a';
    }

    if (props.routeName) {
        return Link;
    }

    return 'div';
});

const styleStore = StyleService();

const activeColor = props.activeColor ?? `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400`;

const activeClass = computed(
    //  () => props.routeName && route().current(props.routeName) == true ? props.activeColor : null
    () => (props.routeName && stardust.isCurrent(props.routeName) ? props.activeColor : null),
);
// const itemRoute = computed(() => (props.routeName ? stardust.route(props.routeName): ''));

const componentClass = computed(() => {
    const base = [
        props.type,
        props.active
            ? activeColor
            : `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`,
    ];

    if (props.type === 'block') {
        base.push('lg:flex');
    }

    if (!props.dropdown) {
        base.push('py-2', 'px-3');
    } else {
        base.push('p-0', 'lg:py-2', 'lg:px-3');
    }

    if (props.isDesktopIconOnly) {
        base.push('lg:w-16', 'lg:justify-center');
    }

    return base;
});
</script>

<template>
    <component
        :is="is"
        class="items-center grow-0 shrink-0 relative cursor-pointer"
        :class="[componentClass, activeClass]"
        :href="routeName ? stardust.route(props.routeName, [props.param]) : href"
    >
        <slot />
    </component>
</template>