elk/components/nav/NavSideItem.vue

39 lines
829 B
Vue
Raw Normal View History

2022-11-27 02:35:26 +00:00
<script setup lang="ts">
const props = defineProps<{
2022-11-27 16:59:33 +00:00
text?: string
2022-11-27 02:35:26 +00:00
icon: string
to: string | Record<string, string>
2022-11-27 02:35:26 +00:00
}>()
2022-11-27 16:59:33 +00:00
defineSlots<{
icon: {}
default: {}
}>()
const router = useRouter()
useCommand({
scope: 'Navigation',
name: () => props.text ?? typeof props.to === 'string' ? props.to as string : props.to.name,
icon: () => props.icon,
onActivate() {
router.push(props.to)
},
})
2022-11-27 02:35:26 +00:00
</script>
<template>
2022-11-29 20:15:53 +00:00
<NuxtLink :to="to" active-class="text-primary" group focus:outline-none @click="$scrollToTop">
2022-11-27 04:45:26 +00:00
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
2022-11-27 02:35:26 +00:00
<slot name="icon">
<div :class="icon" />
</slot>
2022-11-27 16:59:33 +00:00
<slot>
<span>{{ text }}</span>
</slot>
2022-11-27 02:35:26 +00:00
</div>
</NuxtLink>
</template>