<template>
  <div>
    <div class="relative z-50">
      <MainHeader :opacity-bg="opacityBg">
        <template #logo>
          <img src="@/assets/logo.png" class="w-20 h-6" />
        </template>
      </MainHeader>
    </div>
    <SideBar />
    <slot />
    <MainFooter />
  </div>
</template>

<script setup lang="ts">
import MainHeader from '../MainPage/Header.vue';
import MainFooter from '../MainPage/Footer.vue';
import SideBar from '../MainPage/SideBar.vue';

import { computed, ref } from "vue"

let offSetTop = ref(0)
const handleScroll = (e: Event): void => {
  const target: HTMLDocument = e.target as HTMLDocument;
  offSetTop.value = target.scrollingElement?.scrollTop as number;
}

window.addEventListener("scroll", handleScroll);

const opacityBg = computed(() => {
  return offSetTop.value == 0 ? true : false
})
</script>