<script>
import SvgIcon from '@jamescoyle/vue-icon'
export default {
    name: 'SideLink',
    components: {
        SvgIcon
    },
    props: [
        'prefix',
        'route'
    ]
}
</script>
<template>
    <a :href="route.path" class="navlink" target="_blank" rel="noopener noreferrer" v-if="route.path.startsWith('http')">
        <div class="inline-flex px-2 py-1 items-center space-x-1">
            <span class="scale-75">
                <svg-icon type="mdi" :path="route.meta.svgPath"></svg-icon>
            </span>
            <span>{{ route.meta.title }}</span>
        </div>
    </a>
    <router-link :exact-active-class="route.hasOwnProperty('children') ? `` : `active-link`" :active-class="route.hasOwnProperty('children') ? 'active-link' : ''" class="navlink" :to="prefix + '/' + route.path" v-else>
        <div class="inline-flex px-2 py-1 items-center space-x-1">
            <span class="scale-75">
                <svg-icon type="mdi" :path="route.meta.svgPath"></svg-icon>
            </span>
            <span>{{ route.meta.title }}</span>
        </div>
    </router-link>
</template>
<style scoped>
    .navlink.active-link, .navlink.exact-active-link {
        @apply border-l-2;
        @apply border-solid;
        @apply border-olive-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>