From 54e2afa56bc51fd37a017cae8a44fb082686ad18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 23 Apr 2023 14:21:54 +0200
Subject: [PATCH] feat(ui): use sticky position on settings mid panel (#2004)
---
components/main/MainContent.vue | 13 ++++++++++++-
1 file changed, 12 insertions(+), 1 deletion(-)
diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 3034e273..ded5d648 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -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)]"