<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>
