mahyargdz
134 lines
4.2 KiB
Vue
134 lines
4.2 KiB
Vue
<template>
|
|
<!-- <header id="header" :class="routeName === 'lang' ? blogPosts.docs.length ? 'header' : 'header1': 'header1'">-->
|
|
<header class="header">
|
|
<div class="site--header">
|
|
<div class="main-nav container-fluid">
|
|
<div class="row align-items-stretch">
|
|
<div class="col-9">
|
|
<nav>
|
|
<ul>
|
|
<nuxt-link :to="{ name: 'lang', params: { lang: $route.params.lang } }" v-slot="{href,navigate,isActive}" exact custom>
|
|
<li @click="navigate" :class="isActive ? 'active-link' : null">
|
|
<a :href="href">
|
|
<img src="/img/logo.svg" alt="">
|
|
</a>
|
|
</li>
|
|
</nuxt-link>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<div class="col-3 d-flex align-items-center justify-content-end">
|
|
<nuxt-link
|
|
class="btn-header lang"
|
|
:to="{ to: $route.fullPath,query: $route.query, params: { lang: $route.params.lang === 'en' ? 'fa' : 'en' } }">
|
|
{{ $route.params.lang === 'en' ? 'Fa' : 'En' }}
|
|
</nuxt-link>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
drawerVisible: false,
|
|
scrollPosition: null,
|
|
blogPosts: null,
|
|
searching: false,
|
|
searchableText: '',
|
|
}
|
|
},
|
|
methods: {
|
|
drawerHandle() {
|
|
this.drawerVisible = !this.drawerVisible
|
|
const en = this.$route.params.lang === 'en'
|
|
this.$gsap.timeline()
|
|
.fromTo($(".headerDrawer"), {opacity: 0}, {opacity: 1, duration: 1})
|
|
.fromTo($(".drawer-body ul li"), {x: en ? -100 : 100, opacity: 0}, {x: 0, opacity: 1, duration: 0.2, stagger: 0.1}, 0)
|
|
.fromTo($(".link8"), {y: 20, opacity: 0}, {y: 0, opacity: 1, duration: .2}, '-=0.3')
|
|
},
|
|
updateScroll() {
|
|
this.scrollPosition = window.scrollY
|
|
},
|
|
search(status) {
|
|
this.searching = status
|
|
if (status) setTimeout(() => $('#searchInput').focus(), 100)
|
|
else this.searchableText = ''
|
|
},
|
|
doSearch() {
|
|
// if (this.searchableText.length) {
|
|
// window.open(`https://www.google.com/search?q=${this.searchableText}+site%3Ahttps%3A//orisoxin.com/`, "_blank");
|
|
// setTimeout(() => this.search(false), 100)
|
|
// } else {
|
|
// this.$message({
|
|
// type: 'warning',
|
|
// message: 'ابتدا عبارت مورد نظر را بنویسید'
|
|
// })
|
|
// }
|
|
if (this.searchableText.length) {
|
|
this.$router.push({name: 'lang-search', params: {lang: this.$route.params.lang}, query: {terms: this.searchableText}})
|
|
setTimeout(() => this.search(false), 100)
|
|
} else {
|
|
this.$message({
|
|
type: 'warning',
|
|
message: 'ابتدا عبارت مورد نظر را بنویسید'
|
|
})
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
$(document).ready(() => {
|
|
this.$gsap.timeline()
|
|
.fromTo($(".site--header"), {opacity: 0}, {opacity: 1, duration: 1})
|
|
|
|
$(window).scroll(e => {
|
|
if ($(window).scrollTop() > 100) {
|
|
$('.site--header').addClass('hasBG')
|
|
$('.site--header--drawer').addClass('hasBG')
|
|
} else {
|
|
$('.site--header').removeClass('hasBG')
|
|
}
|
|
|
|
// if (window.scrollY > 904 && this.routeName === 'lang' && this.blogPosts.docs.length) $('.header').addClass('_header')
|
|
// else $('.header').removeClass('_header')
|
|
// if (window.scrollY < 905 && this.routeName === 'lang' && this.blogPosts.docs.length) $('.header').addClass('__header')
|
|
// else $('.header').removeClass('__header')
|
|
})
|
|
});
|
|
window.addEventListener('scroll', this.updateScroll);
|
|
},
|
|
|
|
computed: {
|
|
content() {
|
|
return this.$store.state.content.header[this.$route.params.lang]
|
|
},
|
|
routeName() {
|
|
return this.$route.name
|
|
}
|
|
},
|
|
|
|
async fetch() {
|
|
this.blogPosts = await this.$axios.get('/api/public/blogPosts?category=all&page=1').then(res => res.data)
|
|
.catch(e => console.log('e', e))
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.header {
|
|
position: fixed;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 5;
|
|
top: 0;
|
|
background: white;
|
|
padding-top: 18px;
|
|
}
|
|
.main-nav nav ul li a img {
|
|
width: 100PX;
|
|
}
|
|
</style> |