Amir Mohamadi
87 lines
2.8 KiB
Vue
87 lines
2.8 KiB
Vue
<template>
|
|
<header class="header">
|
|
<div class="container-fluid">
|
|
<nav class="row align-items-center">
|
|
<div class="col-7 links">
|
|
<div class="container-fluid">
|
|
<ul class="row align-items-center">
|
|
<nuxt-link :to="{name: staticData.home.url}" tag="li" exact class="col">
|
|
<a class="logo">
|
|
<logo/>
|
|
</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: staticData.home.url}" tag="li" exact class="col">
|
|
<a>{{staticData.home.title}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: staticData.about.url}" tag="li" exact class="col">
|
|
<a>{{staticData.about.title}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: staticData.services.url}" tag="li" exact class="col">
|
|
<a>{{staticData.services.title}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: staticData.products.url}" tag="li" exact class="col">
|
|
<a>{{staticData.products.title}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: staticData.contact.url}" tag="li" exact class="col">
|
|
<a>{{staticData.contact.title}}</a>
|
|
</nuxt-link>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-5 lag-switcher">
|
|
<div class="container-fluid">
|
|
<ul class="row flex-row-reverse align-items-center">
|
|
<li>
|
|
<div class="dropdown" @mouseenter="drop" @mouseleave="drop">
|
|
<div class="title">
|
|
<p v-if="this.$route.params.lang === 'fa'" class="current-lang">فا</p>
|
|
<p v-else-if="this.$route.params.lang === 'en'" class="current-lang">EN</p>
|
|
</div>
|
|
<div class="dropMenu">
|
|
<div class="drop-item">
|
|
<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'fa'}}">فا</nuxt-link>
|
|
</div>
|
|
<div class="drop-item">
|
|
<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'en'}}">EN</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
computed: {
|
|
staticData() {
|
|
if (this.$route.params.lang === 'fa') {
|
|
return this.$store.state.staticData.header.fa
|
|
} else if (this.$route.params.lang === 'en') {
|
|
return this.$store.state.staticData.header.en
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
drop(target) {
|
|
$(target.path).toggleClass('dropdown-active')
|
|
}
|
|
},
|
|
mounted() {
|
|
/////////////////////////////////////////////////////////// small header
|
|
$(window).scroll(function (e) {
|
|
if ($(window).scrollTop() > 50) {
|
|
$('.header').addClass('header-small')
|
|
} else {
|
|
$('.header').removeClass('header-small')
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
</script>
|