<script setup>
import { computed } from 'vue';
import { RouterLink, useRoute } from 'vue-router';

import useLeftSidebar from '@Stores/LeftSidebar';
import GoogleIcon     from '@Shared/GoogleIcon.vue';

/** Definidores */
const leftSidebar = useLeftSidebar();
const vroute      = useRoute();

/** Propiedades */
const props = defineProps({
    icon: String,
    name: String,
    to: String
});

const classes = computed(() => {
    let status = props.to === vroute.name
        ? 'bg-white/20 dark:bg-white/20 border-white dark:border-white font-semibold'
        : 'border-transparent';

    return `flex items-center h-11 focus:outline-hidden hover:bg-white/10 dark:hover:bg-white/10 border-l-4 hover:border-white/50 dark:hover:border-white/50 pr-6 ${status} transition-all duration-200`
});

const closeSidebar = () => {
    if(TwScreen.isDevice('phone') || TwScreen.isDevice('tablet')) {
        leftSidebar.close();
    }
};
</script>

<template>
    <li @click="closeSidebar()">
        <RouterLink
            :class="classes"
            :to="$view({name:to})"
        >
            <span
                v-if="icon"
                class="inline-flex justify-center items-center ml-4 mr-2"
            >
                <GoogleIcon 
                    class="text-xl"
                    :name="icon"
                    outline
                />
            </span>
            <span 
                v-if="name"
                v-text="$t(name)"
                class="text-sm tracking-wide truncate"
            />
            <slot />
        </RouterLink>
    </li>
</template>
