57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
export type NavItemProps = {
|
|
label: string
|
|
icon: string
|
|
to: string
|
|
admin?: boolean
|
|
hide?: boolean
|
|
}
|
|
|
|
const props = withDefaults(defineProps<NavItemProps>(), {
|
|
icon: 'i-tabler-photo-filled',
|
|
admin: false,
|
|
hide: false,
|
|
})
|
|
|
|
const route = useRoute()
|
|
|
|
const active = computed(() => {
|
|
return route.path === props.to
|
|
})
|
|
|
|
const activeClass = computed(() => {
|
|
return props.admin ? 'bg-amber-500 text-white' : 'bg-primary text-white'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink
|
|
v-if="!hide"
|
|
:class="{
|
|
[activeClass]: active,
|
|
'hover:bg-neutral-200 dark:hover:bg-neutral-800': !active,
|
|
}"
|
|
:to="to"
|
|
class="px-4 py-3 flex justify-between items-center rounded-lg transition cursor-pointer"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<Icon
|
|
:name="icon"
|
|
class="text-xl inline"
|
|
/>
|
|
<h1 class="flex-1 text-[14px] font-medium line-clamp-1">
|
|
{{ label }}
|
|
</h1>
|
|
</div>
|
|
<UBadge
|
|
v-if="admin"
|
|
color="warning"
|
|
label="OP"
|
|
size="sm"
|
|
variant="subtle"
|
|
/>
|
|
</NuxtLink>
|
|
</template>
|
|
|
|
<style scoped></style>
|