<script>
import SvgIcon from '@jamescoyle/vue-icon'

export default {
    name: "Navlink",
    components: {
        SvgIcon
    },
    props: [
        "svgPath",
        "text",
        "to"
    ]
}
</script>

<template>
    <a :href="to" class="navlink" target="_blank" rel="noopener noreferrer" v-if="to.startsWith('http')">
        <div class="inline-flex px-3 py-1 space-x-1">
            <span class="scale-75">
                <svg-icon type="mdi" :path="svgPath"></svg-icon>
            </span>
            <span>{{ text }}</span>
        </div>
    </a>
    <div class="relative flex" v-else>
        <div class="relative flex">
            <router-link active-class="active-link" class="navlink" :to="to">
                <div class="inline-flex px-3 py-1 space-x-1">
                    <span class="scale-75">
                        <svg-icon type="mdi" :path="svgPath"></svg-icon>
                    </span>
                    <span>{{ text }}</span>
                </div>
            </router-link>
        </div>
    </div>
</template>

<style scoped>
    .navlink.active-link, .navlink.exact-active-link {
        @apply bg-amber-600;
        @apply text-white;
        @apply hover:bg-orange-500;
        @apply hover:text-white;
    }
    .navlink {
        @apply hover:text-orange-300;
        @apply hover:bg-olive-700;
        @apply bg-olive-800;
        @apply active:text-orange-500;
        @apply rounded-lg;
        @apply h-fit;
        @apply align-middle;
        @apply transition-all;
        @apply ease-in-out;
        @apply duration-1000;
    }
</style>