HAM!DREZA
78 lines
2.2 KiB
Vue
78 lines
2.2 KiB
Vue
<template>
|
|
<div @click="closeCollapse">
|
|
<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)
|
|
|
|
}
|
|
|
|
|
|
})
|
|
},
|
|
methods: {
|
|
closeCollapse(){
|
|
if (process.client) {
|
|
document.querySelector('.items').style.display = 'none'
|
|
document.querySelector('.items2').style.display = 'none'
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|