2022-11-27 11:35:26 +09:00
|
|
|
<script setup lang="ts">
|
2022-12-22 17:31:12 +09:00
|
|
|
const props = withDefaults(defineProps<{
|
2022-11-28 01:59:33 +09:00
|
|
|
text?: string
|
2022-11-27 11:35:26 +09:00
|
|
|
icon: string
|
2022-12-01 02:15:18 +09:00
|
|
|
to: string | Record<string, string>
|
2022-12-22 17:31:12 +09:00
|
|
|
userOnly?: boolean
|
|
|
|
}>(), {
|
|
|
|
userOnly: false,
|
|
|
|
})
|
2022-11-28 01:59:33 +09:00
|
|
|
|
|
|
|
defineSlots<{
|
|
|
|
icon: {}
|
|
|
|
default: {}
|
|
|
|
}>()
|
2022-11-29 17:15:05 +09:00
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
useCommand({
|
|
|
|
scope: 'Navigation',
|
|
|
|
|
2022-12-01 22:45:13 +09:00
|
|
|
name: () => props.text ?? (typeof props.to === 'string' ? props.to as string : props.to.name),
|
2022-11-29 17:15:05 +09:00
|
|
|
icon: () => props.icon,
|
|
|
|
|
|
|
|
onActivate() {
|
|
|
|
router.push(props.to)
|
|
|
|
},
|
|
|
|
})
|
2022-12-22 17:31:12 +09:00
|
|
|
|
|
|
|
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)
|
2022-11-27 11:35:26 +09:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2022-12-22 17:31:12 +09:00
|
|
|
<NuxtLink :to="to" :disabled="noUserDisable" :class="noUserVisual ? 'op25 pointer-events-none ' : ''" :active-class="activeClass" group focus:outline-none @click="$scrollToTop">
|
2022-12-21 09:02:01 +09:00
|
|
|
<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>
|
2022-12-21 21:30:51 +09:00
|
|
|
<span block sm:hidden lg:block>{{ text }}</span>
|
2022-12-21 09:02:01 +09:00
|
|
|
</slot>
|
|
|
|
</div>
|
|
|
|
</CommonTooltip>
|
2022-11-27 11:35:26 +09:00
|
|
|
</NuxtLink>
|
|
|
|
</template>
|