Amir Mohamadi
101 lines
3.1 KiB
Vue
101 lines
3.1 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="staticData.home.url" tag="li" exact class="col">
|
|
<a class="logo">
|
|
<logo/>
|
|
</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="staticData.home.url" tag="li" exact class="col">
|
|
<a>{{staticData.home.title}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="staticData.about.url" tag="li" exact class="col">
|
|
<a>{{staticData.about.title}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="staticData.services.url" tag="li" exact class="col">
|
|
<a>{{staticData.services.title}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="staticData.products.url" tag="li" exact class="col">
|
|
<a>{{staticData.products.title}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="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" id="lang">
|
|
<div class="title">
|
|
<p class="current-lang">فا</p>
|
|
</div>
|
|
<div class="dropMenu">
|
|
<div class="drop-item">
|
|
<p id="fa" class="locales">فا</p>
|
|
</div>
|
|
<div class="drop-item">
|
|
<p id="en" class="locales">EN</p>
|
|
</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
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
const that = this
|
|
/////////////// lang switcher dropdown
|
|
$('#lang').hover(function () {
|
|
$(this).toggleClass('dropdown-active')
|
|
})
|
|
|
|
/////////////// switching language
|
|
$('.locales').click(function () {
|
|
if ($(this).attr('id') === 'fa') {
|
|
const currentURL = window.location.href
|
|
const urlSplit = currentURL.split('en')
|
|
console.log(urlSplit)
|
|
if (urlSplit.length > 1) {
|
|
that.$router.push('/fa' + urlSplit[1])
|
|
$('html').attr({lang: 'fa'})
|
|
$('.current-lang').text('فا')
|
|
}
|
|
} else if ($(this).attr('id') === 'en') {
|
|
const currentURL = window.location.href
|
|
const urlSplit = currentURL.split('fa')
|
|
console.log(urlSplit)
|
|
if (urlSplit.length > 1) {
|
|
that.$router.push('/en' + urlSplit[1])
|
|
$('html').attr({lang: 'en'})
|
|
$('.current-lang').text('EN')
|
|
}
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
</script>
|