mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 04:09:10 +01:00
feat(ui): use sticky position on settings mid panel (#2004)
This commit is contained in:
parent
56405f52bb
commit
54e2afa56b
1 changed files with 12 additions and 1 deletions
|
@ -8,12 +8,23 @@ defineProps<{
|
||||||
noOverflowHidden?: boolean
|
noOverflowHidden?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
|
const container = ref()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
const { height: windowHeight } = useWindowSize()
|
||||||
|
const { height: containerHeight } = useElementBounding(container)
|
||||||
const wideLayout = computed(() => route.meta.wideLayout ?? false)
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div ref="container" :class="containerClass">
|
||||||
<div
|
<div
|
||||||
sticky top-0 z10 backdrop-blur
|
sticky top-0 z10 backdrop-blur
|
||||||
pt="[env(safe-area-inset-top,0)]"
|
pt="[env(safe-area-inset-top,0)]"
|
||||||
|
|
Loading…
Reference in a new issue