<script>
import SvgIcon from '@jamescoyle/vue-icon'
export default {
    name: 'SideLink',
    components: {
        SvgIcon
    },
    props: [
        'prefix',
        '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-2 py-1 items-center space-x-1">
            <span class="scale-75">
                <svg-icon type="mdi" :path="svgPath"></svg-icon>
            </span>
            <span>{{ text }}</span>
        </div>
    </a>
    <router-link exact-active-class="active-link" class="navlink" :to="prefix + '/' + to" v-else>
        <div class="inline-flex px-2 py-1 items-center space-x-1">
            <span class="scale-75">
                <svg-icon type="mdi" :path="svgPath"></svg-icon>
            </span>
            <span>{{ text }}</span>
        </div>
    </router-link>
</template>
<style scoped>
    .navlink.active-link, .navlink.exact-active-link {
        @apply border-l-2;
        @apply border-solid;
        @apply border-lime-600;
        @apply drop-shadow-md;
    }
    .navlink {
        font-family: UncialAntiqua;
        @apply hover:text-orange-600;
        @apply hover:drop-shadow-lg;
        @apply active:text-orange-800;
        @apply h-fit;
        @apply align-middle;
        @apply transition-all;
        @apply ease-in-out;
        @apply duration-500;
    }
</style>