chore: prevent scroll on tabs and side nav

This commit is contained in:
userquin 2023-01-08 18:42:06 +01:00
parent 2303700b63
commit 674adb48ba
2 changed files with 10 additions and 2 deletions

View file

@ -50,7 +50,7 @@ const handleClick = (to: RouteLocationRaw) => {
tabindex="1" tabindex="1"
hover:bg-active transition-100 hover:bg-active transition-100
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)" exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
@click="handleClick(option.to)" @click.capture="handleClick(option.to)"
> >
<span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span> <span ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3 text-secondary-light hover:text-secondary border-transparent>{{ option.display }}</span>
</NuxtLink> </NuxtLink>

View file

@ -15,6 +15,7 @@ defineSlots<{
}>() }>()
const router = useRouter() const router = useRouter()
const nuxtApp = useNuxtApp()
useCommand({ useCommand({
scope: 'Navigation', scope: 'Navigation',
@ -41,6 +42,13 @@ onMastoInit(async () => {
// when we know there is no user. // when we know there is no user.
const noUserDisable = computed(() => !isMastoInitialised.value || (props.userOnly && !currentUser.value)) const noUserDisable = computed(() => !isMastoInitialised.value || (props.userOnly && !currentUser.value))
const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly && !currentUser.value) const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly && !currentUser.value)
const handleClick = () => {
if (nuxtApp.$preventScrollToTop(router.resolve(props.to).fullPath))
return
nuxtApp.$scrollToTop()
}
</script> </script>
<template> <template>
@ -51,7 +59,7 @@ const noUserVisual = computed(() => isMastoInitialised.value && props.userOnly &
:active-class="activeClass" :active-class="activeClass"
group focus:outline-none disabled:pointer-events-none group focus:outline-none disabled:pointer-events-none
:tabindex="noUserDisable ? -1 : null" :tabindex="noUserDisable ? -1 : null"
@click="$scrollToTop" @click="handleClick"
> >
<CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right"> <CommonTooltip :disabled="!isMediumScreen" :content="text" placement="right">
<div <div