elk/components/nav/NavSideItem.vue

60 lines
1.8 KiB
Vue

<script setup lang="ts">
const props = withDefaults(defineProps<{
text?: string
icon: string
to: string | Record<string, string>
userOnly?: boolean
}>(), {
userOnly: false,
})
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)
},
})
let activeClass = $ref('text-primary')
watch(isMastoInitialised, async () => {
if (!props.userOnly) {
// TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active
// we don't have currentServer defined until later
activeClass = ''
await nextTick()
activeClass = 'text-primary'
}
})
// Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
// when we know there is no user.
const noUserDisable = computed(() => !isMastoInitialised.value || (props.userOnly && !currentUser.value))
const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly && !currentUser.value)
</script>
<template>
<NuxtLink :to="to" :disabled="noUserDisable" :class="noUserVisual ? 'op25 pointer-events-none ' : ''" :active-class="activeClass" group focus:outline-none @click="$scrollToTop">
<CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
<div flex w-fit px2 mx3 lg:mx0 lg:px5 py2 gap4 items-center transition-100 rounded-full group-hover:bg-active group-focus-visible:ring="2 current">
<slot name="icon">
<div :class="icon" text-xl />
</slot>
<slot>
<span block sm:hidden lg:block>{{ text }}</span>
</slot>
</div>
</CommonTooltip>
</NuxtLink>
</template>