<template>
  <div>
    <PreLoader/>
    <PageLoad v-if="this.$store.state.global_vars.preLoader"/>
    <SiteHeader/>
    <OffcanvasMenu/>
    <nuxt/>
    <SiteFooter v-if="$route.name !== 'index'"/>
    <IconsHamburgerBtn/>
  </div>
</template>
<script>
export default {
  mounted() {
    ////////////////////////////////////// global router guards
    const _du = this.$store.state.animations.pageLoad.duration
    // const _ease = context.store.state.animations.pageLoad.ease
    const _ease = ''
    ///////// add navigation guards to router
    ////////////////////////////////////////////////////////////////////////// beforeEach
    this.$router.beforeEach((to, from, next) => {
      $('body').attr('class', null)
      //// page Load animation
      if (this.$store.state.global_vars.preLoader) {
        if (window.innerWidth >= 768) {
          this.$gsap.timeline({
            onComplete: () => {
              next()
            }
          })
              .set($('.pageLoad'), {display: 'block'})
              .to($('.pageLoad .cCol'), {opacity: 1, stagger: 0.005, duration: 0.5})
        } else {
          if (this.$store.state.global_vars.offCanvas) {
            $('.hamburger--btn').click()
          }
          next()
        }
      }
    })
    ////////////////////////////////////////////////////////////////////////// afterEach
    this.$router.afterEach((to, from) => {
      //// change theme
      setTimeout(function () {
        $(":root").css({
          '--theme': '#8DC640',
          '--theme-hover': '#5E943C',
          '--bg-color': '#F2F2F2'
        })
        $('body').removeClass('cafe--theme')
        document.querySelector('meta[name="theme-color"]').setAttribute("content", '#8DC640');
      }, 200)


      //// page Load animation
      if (this.$store.state.global_vars.preLoader) {

        this.$gsap.timeline()
            .to($('.pageLoad .cCol'), {opacity: 0, stagger: 0.005, duration: 0.5})
            .set($('.pageLoad'), {display: 'none'})
            .timeScale(0.7)

      }


    })
  }
}
</script>
