matthieu
95450e3b5f
Introduces SidebarLink component, UI store with localStorage persistence, and smooth CSS transitions between expanded (w-64) and compact (w-16) modes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
53 lines
1.7 KiB
Vue
53 lines
1.7 KiB
Vue
<template>
|
|
<NuxtLink
|
|
:to="to"
|
|
class="group/link relative flex items-center transition-colors hover:text-primary-500"
|
|
:class="linkClasses"
|
|
:active-class="exact ? '' : activeClass"
|
|
:exact-active-class="exact ? 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 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>
|