arakrail/layouts/default.vue

<template>
  <div>
    <SiteHeader/>
    <nuxt/>
    <SiteFooterHomePage v-if="this.$route.name === 'lang'"/>
    <SiteFooterGlobal v-else/>
    <off-canvas/>
    <page-load/>
    <pre-loader/>
  </div>
</template>


<script>
export default {
  mounted() {
    ////////////////////////////////////////// global router guards
    this.$router.beforeEach((to, from, next) => {
      this.$gsap.timeline({
        onComplete: () => {
          next()
        }
      })
          .to($('.page-load'), {autoAlpha: 1, duration: 0.3})
          .fromTo($('.page-load svg'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
          .fromTo($('.page-load p'), {opacity: 0, scale: 1, y: 10}, {opacity: 1, y: 0, duration: 0.15})
    })

    this.$router.afterEach((to, from) => {
      this.$gsap.timeline({delay: 0.3})
          .to($('.page-load p,.page-load svg'), {opacity: 0, scale: 0.5, duration: 0.15})
          .to($('.page-load'), {autoAlpha: 0, duration: 0.5})
    })
  },
  head() {
    return {
      htmlAttrs: {
        lang: this.$route.params.lang
      },
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.$store.state.global.meta_description[this.$route.params.lang]
        }
      ],
    }
  }
}
</script>