Skip to content

Commit

Permalink
feat(ui): use sticky position on settings mid panel (#2004)
Browse files Browse the repository at this point in the history
  • Loading branch information
userquin authored Apr 23, 2023
1 parent 56405f5 commit 54e2afa
Showing 1 changed file with 12 additions and 1 deletion.
13 changes: 12 additions & 1 deletion components/main/MainContent.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,23 @@ defineProps<{
noOverflowHidden?: boolean
}>()
const container = ref()
const route = useRoute()
const { height: windowHeight } = useWindowSize()
const { height: containerHeight } = useElementBounding(container)
const wideLayout = computed(() => route.meta.wideLayout ?? false)
const sticky = computed(() => route.path?.startsWith('/settings/'))
const containerClass = computed(() => {
// we keep original behavior when not in settings page and when the window height is smaller than the container height
if (!isHydrated.value || !sticky.value || (windowHeight.value < containerHeight.value))
return null
return 'lg:sticky lg:top-0'
})
</script>

<template>
<div>
<div ref="container" :class="containerClass">
<div
sticky top-0 z10 backdrop-blur
pt="[env(safe-area-inset-top,0)]"
Expand Down

0 comments on commit 54e2afa

Please sign in to comment.