arakrail/components/SiteHeader.vue

<template>
  <header class="header">
    <div class="lang-bar">
      <a v-if="catalog && catalog.file" :href="catalog.file[$route.params.lang]" target="_blank" class="catalog-download">
        <span>{{ staticData.catalog }}</span>
        <span>&nbsp;</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">
        <!-- desktop -->
        <div class="col-12 d-none d-md-block 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" 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 :class="$route.name === 'lang-tech-gTech' ? 'sub-menu-active' : null">
                      <nuxt-link :to="{name: 'lang-tech-gTech',params: {lang: $route.params.lang}}">{{ staticData.ti_1 }}</nuxt-link>
                    </li>
                    <li :class="$route.name === 'lang-tech-gStandard' ? 'sub-menu-active' : null">
                      <nuxt-link :to="{name: 'lang-tech-gStandard',params: {lang: $route.params.lang}}">{{ staticData.ti_2 }}</nuxt-link>
                    </li>
                    <li :class="$route.name === 'lang-tech-gDesign' ? 'sub-menu-active' : null">
                      <nuxt-link :to="{name: 'lang-tech-gDesign',params: {lang: $route.params.lang}}">{{ staticData.ti_3 }}</nuxt-link>
                    </li>
                    <li :class="$route.name === 'lang-tech-gUsage' ? 'sub-menu-active' : null">
                      <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>

        <!-- mobile -->
        <div class="col-12 d-md-none links mobile">
          <div class="container-fluid">
            <ul class="row">
              <li class="col">
                <nuxt-link :to="{name: 'lang',params: {lang: $route.params.lang}}" exact class="logo">
                  <Logo/>
                </nuxt-link>
              </li>
              <li class="col menu">
                <div id="menuBtn" @click="offCanvas">
                  <div class="bars b1"></div>
                  <div class="bars b2"></div>
                  <div class="bars b3"></div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      catalog: null
    }
  },
  async fetch() {
    try {
      let catalog = await this.$axios.get('/api/public/catalog')
      this.catalog = catalog.data
    } catch (e) {
      this.$nuxt.context.error({status: 404, message: 'Catalog file not found'})
    }
  },
  computed: {
    staticData() {
      return this.$store.state.staticData.header[this.$route.params.lang]
    },
    offCanvasLiTL() {
      if (process.server) return null
      else return this.$gsap.timeline({delay: 0.3, paused: true})
          .fromTo($('.offCanvas ul li'), {
            x: this.$route.params.lang === 'fa' ? 10 : -10,
            opacity: 0
          }, {
            x: 0,
            opacity: 1,
            duration: 0.4,
            stagger: 0.03
          })
    }
  },
  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()})
      } else {
        el.css({height: 0})
      }
    },
    offCanvas() {
      if ($('.offCanvas').hasClass('active')) this.offCanvasLiTL.reverse()
      else this.offCanvasLiTL.play()
      $('#menuBtn').toggleClass('close')
      $('.offCanvas').toggleClass('active')
      $('body').toggleClass('offCanvas-active')
    }
  },
  mounted() {
    /////////////////////////////////////////////////////////// small header
    $(window).scroll(function (e) {
      if ($(window).scrollTop() > 50) {
        $('.header,.offCanvas').addClass('header-small')
      } else {
        $('.header,.offCanvas').removeClass('header-small')
      }
    })
    /////////////////////////////////// offCanvas menu links
    $('.offCanvas ul li').click(() => {
      this.offCanvas()
    })
    $('.header .lang-bar a').click(() => {
      if ($('.offCanvas').hasClass('active')) this.offCanvas()
    })
  }
}
</script>