<template>
  <header>
    <Nav/>
  </header>
  <main>
    <div :style="{height: offset + 'px'}"/>
    <InfoModal/>
    <router-view name="main"/>
  </main>
  <footer class="mt-auto">
    <Footer/>
  </footer>
  <CookieConsentBtn id="cookie-btn"/>
</template>

<script>
import Nav from "@/components/Nav";
import Footer from "@/components/Footer";
import CookieConsentBtn from "@/components/CookieConsentBtn";
import {onMounted, ref} from "vue";
import InfoModal from "@/components/InfoModal";

export default {
  components: {InfoModal, Footer, Nav, CookieConsentBtn},
  setup() {
    const offset = ref(0)

    const setOffset = () => {
      return document.getElementsByTagName('nav')[0].clientHeight
    }

    window.onresize = () => {
      offset.value = setOffset()
    }

    onMounted(() => {
      offset.value = setOffset()
    })

    return {offset}
  }
}
</script>

<style lang="scss">
@font-face {
  font-family: "Obitron";
  src: local("Obitron"), url("assets/fonts/Orbitron-VariableFont_wght.ttf") format("truetype");
}

#cookie-btn {
  position: fixed;
  bottom: 30px;
  right: 20px;
}
</style>
