37 lines
694 B
Vue
37 lines
694 B
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
icon: {
|
|
type: String,
|
|
default: 'i-tabler-photo-filled',
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
to: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const route = useRoute()
|
|
|
|
const active = computed(() => {
|
|
return route.path === props.to
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink
|
|
class="px-4 py-3 flex items-center gap-2 rounded-lg transition cursor-pointer"
|
|
:class="active ? 'bg-primary text-white' : 'hover:bg-neutral-200'"
|
|
:to="to"
|
|
>
|
|
<Icon :name="icon" class="text-xl inline"/>
|
|
<h1 class="text-[14px] font-medium">{{ label }}</h1>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |