<script setup lang="ts">
const mainRef = ref<HTMLElement>()

const { height: viewportH } = useWindowSize()
const { bottom: mainBottom } = useElementBounding(mainRef)

const pinToMain = computed(() => {
  if (!mainBottom.value) return false
  return mainBottom.value <= viewportH.value
})

provide('pinToMain', pinToMain)
</script>

<template>
  <LayoutsHeader />
  <main id="LayoutsMain" ref="mainRef" class="relative">
    <BlocksButtonHome />
    <LayoutsEventNavigation />
    <slot />
  </main>
  <LayoutsFooter />
</template>
