fix: show back button on correct viewport

This commit is contained in:
Michel EDIGHOFFER 2023-01-17 22:48:53 +01:00
parent 868c5f5d2b
commit 4ee298d563
3 changed files with 3 additions and 2 deletions

View file

@ -37,7 +37,7 @@ const { notifications } = useNotifications()
<div shrink hidden sm:block mt-4 /> <div shrink hidden sm:block mt-4 />
<NavSideItem v-if="!isExploreRoute()" :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" hidden xl:block :command="command" /> <NavSideItem v-if="!isExploreRoute()" :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" hidden xl:block :command="command" />
<SearchWidget v-else-if="!isSmallScreen" ref="search" lg:ms-1 lg:me-5 lg:mb-1 hidden xl:block /> <SearchWidget v-else-if="!isExtraLargeScreen" ref="search" lg:ms-1 lg:me-5 lg:mb-1 hidden xl:block />
<NavSideItem :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" xl:hidden :command="command" /> <NavSideItem :text="`${$t('nav.search')} ${$t('common.and')} ${$t('nav.explore')}`" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:search-line" xl:hidden :command="command" />
<NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" /> <NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />

View file

@ -4,3 +4,4 @@ export const breakpoints = useBreakpoints(breakpointsTailwind)
export const isSmallScreen = breakpoints.smallerOrEqual('md') export const isSmallScreen = breakpoints.smallerOrEqual('md')
export const isMediumScreen = breakpoints.smallerOrEqual('lg') export const isMediumScreen = breakpoints.smallerOrEqual('lg')
export const isExtraLargeScreen = breakpoints.smallerOrEqual('xl')

View file

@ -24,7 +24,7 @@ const tabs = $computed(() => [
</script> </script>
<template> <template>
<MainContent no-overflow-hidden> <MainContent no-overflow-hidden :back-on-small-screen="isExtraLargeScreen">
<template #title> <template #title>
<SearchWidget ref="search" class="m-1" /> <SearchWidget ref="search" class="m-1" />
</template> </template>