update:add ci cd files ==> do not edit those file
This commit is contained in:
mahyargdz
@@ -0,0 +1,273 @@
|
||||
<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 d-none d-lg-block">
|
||||
<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>
|
||||
<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">{{ content.t1 }}</a>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'lang-about', params: { lang: $route.params.lang } }" v-slot="{href,navigate,isActive}" custom>
|
||||
<li @click="navigate" :class="isActive ? 'active-link' : null">
|
||||
<a :href="href">{{ content.t2 }}</a>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-activities',params: { lang: $route.params.lang }}" v-slot="{href,navigate,isActive}" custom>
|
||||
<li @click="navigate" :class="isActive ? 'active-link' : null">
|
||||
<a :href="href">{{ content.t3 }}</a>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-projects', params: { lang: $route.params.lang },query: {category: 'all'}}" v-slot="{href,navigate,isActive}" custom>
|
||||
<li @click="navigate" :class="isActive ? 'active-link' : null">
|
||||
<a :href="href">{{ content.t4 }}</a>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-gallery',params: { lang: $route.params.lang }}"
|
||||
v-slot="{href,navigate,isActive}" custom>
|
||||
<li @click="navigate" :class="isActive ? 'active-link' : null">
|
||||
<a :href="href">{{ content.t5 }}</a>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{name: 'lang-catalog',params: { lang: $route.params.lang }}" v-slot="{href,navigate,isActive}" custom>
|
||||
<li @click="navigate" :class="isActive ? 'active-link' : null">
|
||||
<a :href="href">{{ content.t6 }}</a>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
<nuxt-link
|
||||
:to="{ name: 'lang-blog', params: { lang: $route.params.lang },query: {category: 'all',page: 1} }"
|
||||
v-slot="{href,navigate,isActive}" custom>
|
||||
<li @click="navigate" :class="isActive ? 'active-link' : null">
|
||||
<a :href="href">{{ content.t7 }}</a>
|
||||
</li>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-3 d-none d-lg-flex align-items-center justify-content-end">
|
||||
<div class="searchBtns">
|
||||
<i class="fal fa-search" v-if="!searching" @click="search(true)"></i>
|
||||
<i class="fal fa-times" v-else @click="search(false)"></i>
|
||||
</div>
|
||||
<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>
|
||||
<nuxt-link class="btn-header contact" :to="{ name: 'lang-contact', params: { lang: $route.params.lang } }">
|
||||
{{ content.t8 }}
|
||||
</nuxt-link>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="searchBox d-none d-md-block" :class="searching? 'active-search' : null">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<form @submit.prevent="doSearch" class="searchInput">
|
||||
<input type="text" name="search" id="searchInput" placeholder="عبارت مدنظر خود را جستجو کنید" v-model="searchableText">
|
||||
<button type="submit">
|
||||
<i class="fas fa-arrow-circle-left"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12 d-lg-none">
|
||||
<button @click="drawerHandle" class="icon-menu-open">
|
||||
<i class="fas fa-bars" style="font-size: 25px"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="site--header--drawer" :class="[drawerVisible ? 'isOpen' : '', routeName === 'lang' && 'drawer']">
|
||||
<div class="headerDrawer">
|
||||
<div>
|
||||
<img src="/img/logo.svg" alt="OrisOxin logo"/>
|
||||
</div>
|
||||
<button @click="drawerHandle" class="icon-menu-close">
|
||||
<i class="fas fa-times fa-2x"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="drawer-body">
|
||||
<ul @click="drawerHandle">
|
||||
<li class="link1">
|
||||
<nuxt-link class="li-link" :to="{ name: 'lang', params: { lang: $route.params.lang } }" exact>
|
||||
<i class="fas fa-home"></i>
|
||||
{{ content.t1 }}
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="link2">
|
||||
<nuxt-link class="li-link" :to="{name: 'lang-about',params: { lang: $route.params.lang }}">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
{{ content.t2 }}
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="link3">
|
||||
<nuxt-link class="li-link" :to="{name: 'lang-activities',params: { lang: $route.params.lang }}">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
{{ content.t3 }}
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="link4">
|
||||
<nuxt-link class="li-link" :to="{name: 'lang-projects',params: { lang: $route.params.lang },query: {category: 'all'}}">
|
||||
<i class="fas fa-project-diagram"></i>
|
||||
{{ content.t4 }}
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="link5">
|
||||
<nuxt-link class="li-link" :to="{name: 'lang-gallery',params: { lang: $route.params.lang }}">
|
||||
<i class="fas fa-images"></i>
|
||||
{{ content.t5 }}
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="link6">
|
||||
<nuxt-link class="li-link" :to="{name: 'lang-catalog',params: { lang: $route.params.lang }}">
|
||||
<i class="fas fa-clipboard-list"></i>
|
||||
{{ content.t6 }}
|
||||
</nuxt-link>
|
||||
</li>
|
||||
<li class="link7">
|
||||
<nuxt-link class="li-link" :to="{ name: 'lang-blog', params: { lang: $route.params.lang },query: {category: 'all',page: 1}}">
|
||||
<i class="fas fa-blog"></i>
|
||||
{{ content.t7 }}
|
||||
</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="btn-drawer">
|
||||
<div class="row">
|
||||
<div class="col-6 mb-2">
|
||||
<nuxt-link class="li-link-btn btn-contact-drawer link8" :to="{name: 'lang-contact',params: { lang: $route.params.lang }}"
|
||||
@click.native="drawerHandle">
|
||||
{{ content.t8 }}</nuxt-link>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<nuxt-link
|
||||
class="li-link-btn btn-contact-drawer link8"
|
||||
: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 class="col-12">
|
||||
<div class="searchBox d-block d-lg-none">
|
||||
<form @submit.prevent="doSearch" class="searchInput">
|
||||
<input type="text" name="search" id="searchInput1" placeholder="عبارت مدنظر خود را جستجو کنید" v-model="searchableText">
|
||||
<button type="submit">
|
||||
<i class="fas fa-arrow-circle-left"></i>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer-BG"></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>
|
||||
Reference in New Issue
Block a user