tristan
b769abdbe1
Some checks failed
Auto Tag Develop / tag (push) Has been cancelled
Reviewed-on: #3 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
60 lines
1.8 KiB
Vue
60 lines
1.8 KiB
Vue
<template>
|
|
<NuxtLink
|
|
:to="to"
|
|
class="group/link relative flex items-center transition-colors hover:text-primary-500"
|
|
:class="[linkClasses, isActive ? activeClass : '']"
|
|
>
|
|
<Icon :name="icon" :size="sub ? '20' : '24'" class="flex-shrink-0" />
|
|
<span
|
|
v-if="!collapsed"
|
|
class="self-baseline whitespace-nowrap overflow-hidden transition-opacity duration-300"
|
|
:class="sub ? 'text-sm' : 'text-md'"
|
|
>
|
|
{{ label }}
|
|
</span>
|
|
<div
|
|
v-if="collapsed"
|
|
class="pointer-events-none absolute left-full z-50 ml-2 rounded-md bg-neutral-800 px-2 py-1 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/link:pointer-events-auto group-hover/link:opacity-100 whitespace-nowrap"
|
|
>
|
|
{{ label }}
|
|
</div>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
to: string
|
|
icon: string
|
|
label: string
|
|
collapsed: boolean
|
|
sub?: boolean
|
|
exact?: boolean
|
|
}>()
|
|
|
|
const route = useRoute()
|
|
|
|
const isActive = computed(() => {
|
|
if (props.exact) {
|
|
return route.path === props.to
|
|
}
|
|
return route.path === props.to || route.path.startsWith(props.to + '/')
|
|
})
|
|
|
|
const activeClass = computed(() => {
|
|
if (props.collapsed) {
|
|
return '!text-primary-500 bg-primary-500/10'
|
|
}
|
|
return '!text-primary-500 bg-tertiary-500'
|
|
})
|
|
|
|
const linkClasses = computed(() => {
|
|
if (props.collapsed) {
|
|
return 'justify-center w-10 h-10 mx-auto my-1 p-2 rounded-lg text-neutral-600 hover:text-primary-500 hover:bg-primary-500/10'
|
|
}
|
|
if (props.sub) {
|
|
return 'gap-3 px-4 py-2 pl-12 text-sm font-semibold text-neutral-700'
|
|
}
|
|
return 'gap-3 px-4 py-3 text-md font-semibold text-neutral-700'
|
|
})
|
|
</script>
|