Dominik Milacher
0dc24c4db7
Some checks failed
Build and deploy updated apps / Build & deploy (push) Failing after 50s
76 lines
1.5 KiB
Vue
76 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
class?: string
|
|
ux?: any
|
|
fill?: boolean
|
|
overlap?: boolean
|
|
position: 'above' | 'below'
|
|
}>()
|
|
|
|
let observer: ResizeObserver | null = null
|
|
|
|
function updateHeaderHeight() {
|
|
const header = document.getElementById('scaffold-header')
|
|
const height = header?.getBoundingClientRect().height ?? 0
|
|
|
|
document.documentElement.style.setProperty('--scaffold-header-height', `${height}px`)
|
|
}
|
|
|
|
onMounted(() => {
|
|
updateHeaderHeight()
|
|
|
|
observer = new ResizeObserver(() => updateHeaderHeight())
|
|
window.addEventListener('resize', updateHeaderHeight)
|
|
})
|
|
|
|
onBeforeUnmount(() => {
|
|
if (observer) observer.disconnect()
|
|
window.removeEventListener('resize', updateHeaderHeight)
|
|
})
|
|
|
|
const classes = useStyling(
|
|
'scaffoldGridMenu',
|
|
{
|
|
slots: {
|
|
base: 'fixed w-[100vw] grid grid-rows-[var(--scaffold-header-height)_1fr] grid-cols-1 pointer-events-none',
|
|
content: 'col-span-full',
|
|
},
|
|
variants: {
|
|
fill: {
|
|
true: {
|
|
base: 'h-[100vh]',
|
|
},
|
|
false: {},
|
|
},
|
|
overlap: {
|
|
true: {
|
|
content: 'row-span-full',
|
|
},
|
|
false: {
|
|
content: 'row-2',
|
|
},
|
|
},
|
|
position: {
|
|
above: {
|
|
base: 'z-175',
|
|
content: 'z-200',
|
|
},
|
|
below: {
|
|
base: 'z-100',
|
|
content: 'z-125',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
props
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="classes.base">
|
|
<div :class="classes.content">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</template>
|