forked from Mirrors/elk
fix: show back button on correct viewport
This commit is contained in:
parent
868c5f5d2b
commit
4ee298d563
3 changed files with 3 additions and 2 deletions
|
@ -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" />
|
||||||
|
|
|
@ -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')
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue