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

<script lang="ts" 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,
    underline: {
        type: Boolean,
        default: false,
    },
});

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 active = computed(() => {
//     if (props.routeName && stardust.isCurrent(props.routeName)) {
//         return true;
//     }
//     else {
//         return false;
//     }
// });

const activeClass = computed(() => {
    if (props.routeName && stardust.isCurrent(props.routeName)) {
        // console.log(props.item.route);
        const activeCls = [
        styleStore.navBarItemLabelActiveColorStyle,
        'dark:text-slate-400'
        ];
        
    if (props.underline) {
        activeCls.push('app-menu-entry__active');
    }

        // return `${styleStore.navBarItemLabelActiveColorStyle} dark:text-slate-400 app-menu-entry__active`;
        return activeCls;
    } else {
        return null;
    }
});

// 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,
        `${styleStore.navBarItemLabelStyle} dark:text-white dark:hover:text-slate-400 ${styleStore.navBarItemLabelHoverStyle}`,
        // 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>

<style lang="css" scoped>
.app-menu-entry__active {
    opacity: 1;
}

.app-menu-entry__active::before {
    content: "___";
    position: absolute;
    pointer-events: none;
    /* border-bottom-color: var(--color-main-background); */
    /* transform: translateX(-50%); */
    width: 100%;
    /* height: 5px; */
    border-radius: 3px;
    background-color: var(--color-primary-element-text);
    /* left: 50%; */
    bottom: 6px;
    display: block;
    transition: all 0.1s ease-in-out;
    opacity: 1;
}
</style>