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

<script lang="ts" setup>
import BaseIcon from '@/Components/BaseIcon.vue';
import { computed } from 'vue';
import { stardust } from '@eidellev/adonis-stardust/client';

const props = defineProps({
    icon: {
        type: String,
        default: null,
    },
    label: {
        type: String,
        required: true,
    },
    size: {
        type: [String, Number],
        default: 16,
    },
    isDesktopIconOnly: Boolean,
    isHoverLabelOnly: Boolean,
    routeName: {
        type: String,
        default: null,
    },
});

const active = computed(() => {
    if (props.routeName && stardust.isCurrent(props.routeName)) {
        return true;
    }
    else {
        return false;
    }
});

const componentClass = computed(() => {
    const base = [
        // props.type,
        'flex',
    ];    
    if (props.isHoverLabelOnly ) {
        base.push(' flex-col items-center');
    }   

    return base;
});

const labelClass = computed(() => {
    const base = [
        // props.type,
        'transition',
    ];

    if (props.isDesktopIconOnly && props.icon) {
        base.push('lg:hidden');
    }

    if (props.isHoverLabelOnly && active.value == false) {
        base.push('hidden');
    } else if(props.isHoverLabelOnly && active.value == true) {
        base.push('display-block');
    }

   

    return base;
});
</script>

<template>
    <div :class="componentClass">
        <slot />
        <BaseIcon v-if="icon" :path="props.icon" class="transition-colors" :size="props.size" />
        <!-- <span class="px-2 transition-colors" :class="{ 'lg:hidden': isDesktopIconOnly && props.icon }">{{ props.label }}</span> -->
        <span class="px-2 transition-colors" :class="labelClass">{{ props.label }}</span>
    </div>
</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;
    border-bottom: 2px;
    /* background-color: var(--color-primary-element-text); */
    /* left: 50%; */
    bottom: 6px;
    display: block;
    transition: all 0.1s ease-in-out;
    opacity: 1;
}
</style> -->