Amir Mohamadi
126 lines
4.3 KiB
Vue
126 lines
4.3 KiB
Vue
<template>
|
|
<header class="header">
|
|
<div class="lang-bar">
|
|
<a :href="catalog_link" download="catalog.pdf" target="_blank" class="catalog-download">
|
|
<span>{{staticData.catalog}}</span>
|
|
<span> </span>
|
|
<i class="fas fa-download"></i>
|
|
</a>
|
|
<div class="dropdown" @mouseenter="drop" @mouseleave="drop">
|
|
<div class="title">
|
|
<p class="current-lang">
|
|
<span>FA / EN</span>
|
|
<i class="fas fa-sort-down"></i>
|
|
</p>
|
|
</div>
|
|
<div class="dropMenu">
|
|
<div class="drop-item">
|
|
<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'fa'}}">FA</nuxt-link>
|
|
</div>
|
|
<div class="drop-item">
|
|
<nuxt-link :to="{to: this.$route.fullPath, params: {lang: 'en'}}">EN</nuxt-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<nav class="row align-items-center">
|
|
<div class="col-12 links">
|
|
<div class="container-fluid">
|
|
<ul class="row justify-content-start">
|
|
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
|
<a class="logo">
|
|
<Logo/>
|
|
</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
|
<a>{{staticData.home}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: 'lang-about',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
|
<a>{{staticData.about}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: 'lang-services',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
|
<a>{{staticData.services}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: 'lang-products',params: {lang: $route.params.lang}}" tag="li" class="">
|
|
<a>{{staticData.products}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: 'lang-projects',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
|
<a>{{staticData.projects}}</a>
|
|
</nuxt-link>
|
|
<li class="tech_info" @mouseenter="tech_info" @mouseleave="tech_info"
|
|
:class="$route.name === 'lang-tech-gDesign' ||
|
|
$route.name === 'lang-tech-gStandard' ||
|
|
$route.name === 'lang-tech-gTech' ||
|
|
$route.name === 'lang-tech-gUsage' ? 'active' : null">
|
|
<a>{{staticData.tech_info}}</a>
|
|
<div class="drop-down">
|
|
<ul>
|
|
<li>
|
|
<nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}">{{staticData.ti_1}}</nuxt-link>
|
|
</li>
|
|
<li>
|
|
<nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}">{{staticData.ti_2}}</nuxt-link>
|
|
</li>
|
|
<li>
|
|
<nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}">{{staticData.ti_3}}</nuxt-link>
|
|
</li>
|
|
<li>
|
|
<nuxt-link :to="{name: 'lang-tech-gUsage',params: {lang: $route.params.lang}}">{{staticData.ti_4}}</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<nuxt-link :to="{name: 'lang-blog',params: {lang: $route.params.lang}}" tag="li" class="">
|
|
<a>{{staticData.blog}}</a>
|
|
</nuxt-link>
|
|
<nuxt-link :to="{name: 'lang-contact',params: {lang: $route.params.lang}}" tag="li" exact class="">
|
|
<a>{{staticData.contact}}</a>
|
|
</nuxt-link>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
catalog_link: this.$store.state.staticData.catalog_link
|
|
}
|
|
},
|
|
computed: {
|
|
staticData() {
|
|
return this.$store.state.staticData.header[this.$route.params.lang]
|
|
}
|
|
},
|
|
methods: {
|
|
drop() {
|
|
$('.dropdown').toggleClass('dropdown-active')
|
|
},
|
|
tech_info() {
|
|
const el = $('.tech_info .drop-down')
|
|
if (el.height() === 0) {
|
|
el.css({height: $('.tech_info .drop-down ul').height() + 10})
|
|
} else {
|
|
el.css({height: 0})
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
/////////////////////////////////////////////////////////// small header
|
|
$(window).scroll(function (e) {
|
|
if ($(window).scrollTop() > 50) {
|
|
$('.header').addClass('header-small')
|
|
} else {
|
|
$('.header').removeClass('header-small')
|
|
}
|
|
})
|
|
|
|
}
|
|
}
|
|
</script>
|