47 lines
2.2 KiB
Vue
47 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
name: string;
|
|
icon?: string;
|
|
to?: string;
|
|
active?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink v-if="props.to" v-bind="$attrs" :to="props.to" :aria-label="props.name" :class="[
|
|
'decoration-none text-[var(--color-muted)] flex justify-between items-center shrink-0 rounded-lg transition-colors cursor-pointer h-9',
|
|
props.icon ? 'px-1' : 'px-2',
|
|
props.active
|
|
? 'text-[var(--color-text)] bg-[var(--color-highlight)] hover:bg-[var(--color-highlight-high)] focus-visible:bg-[var(--color-highlight-high)]'
|
|
: 'hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)]'
|
|
]">
|
|
<div class="flex items-center gap-2 max-w-full flex-1">
|
|
<div v-if="props.icon" class="h-7 w-7 flex items-center justify-center">
|
|
<Icon class="text-4.5" :name="props.icon" />
|
|
</div>
|
|
<div class="flex justify-between items-center w-full">
|
|
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
|
|
}}</span>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</NuxtLink>
|
|
<button v-else v-bind="$attrs" :aria-label="props.name" :class="[
|
|
'flex justify-between items-center shrink-0 px-1 rounded-lg transition-colors cursor-pointer h-9',
|
|
props.icon ? 'px-1' : 'px-2',
|
|
props.active
|
|
? 'text-[var(--color-text)] bg-[var(--color-highlight)] hover:bg-[var(--color-highlight-high)] focus-visible:bg-[var(--color-highlight-high)]'
|
|
: 'hover:bg-[var(--color-highlight)] focus-visible:bg-[var(--color-highlight)]'
|
|
]">
|
|
<div class="flex items-center gap-2 max-w-full flex-1">
|
|
<div v-if="props.icon" class="h-7 w-7 flex items-center justify-center">
|
|
<Icon class="text-4.5" :name="props.icon" />
|
|
</div>
|
|
<div class="flex justify-between items-center w-full">
|
|
<span class="text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap">{{ props.name
|
|
}}</span>
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</template> |