<template>
  <div class="home-page">
    <Head :shadow="headerShadow" />

    <main class="home-main">
      <router-view></router-view>
    </main>

    <Footer />
  </div>
</template>
<script>
import Footer from '../components/footer.vue'
import Head from '../components/head.vue'

export default {
  name: 'Home',
  components: { Head, Footer },
  provide() {
    return {
      scrollParent: () => this.$el,
      setHeaderShadow: (shadow) => (this.headerShadow = shadow),
    }
  },
  data() {
    return {
      headerShadow: true,
    }
  },
  mounted() {
    this.$el.addEventListener('scroll', this.onScroll)
  },
  beforeDestroy() {
    this.$el.removeEventListener('scroll', this.onScroll)
  },
  methods: {
    onScroll() {
      const top = this.$el.scrollTop
      if (top === 0) {
        this.$el.classList.remove('scrolling')
      } else {
        this.$el.classList.add('scrolling')
      }
    },
  },
}
</script>
<style scoped>
.home-page {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden auto;
}

.home-page::-webkit-scrollbar {
  width: 0;
}

.home-page .header {
  transition: all 0.3s;
}

.home-page.scrolling .header {
  box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%);
  background-color: rgba(27, 28, 29, 0.9);
  backdrop-filter: blur(10px);
}

.home-main {
  /* padding-top: 60px; */
}
</style>
