orisoxin/components/SiteHeader.vue

<template>
  <!--  <header id="header" :class="routeName === 'lang' ? blogPosts.docs.length ? 'header' : 'header1': 'header1'">-->
  <header class="header">
    <div class="site--header">
      <div class="main-nav container-fluid">
        <div class="row align-items-stretch">
          <div class="col-9 d-none d-lg-block">
            <nav>
              <ul>
                <nuxt-link :to="{ name: 'lang', params: { lang: $route.params.lang } }" v-slot="{href,navigate,isActive}" exact custom>
                  <li @click="navigate" :class="isActive ? 'active-link' : null">
                    <a :href="href">
                      <img src="/img/logo.svg" alt="">
                    </a>
                  </li>
                </nuxt-link>
                <nuxt-link :to="{ name: 'lang', params: { lang: $route.params.lang }}" v-slot="{href,navigate,isActive}" exact custom>
                  <li @click="navigate" :class="isActive ? 'active-link' : null">
                    <a :href="href">{{ content.t1 }}</a>
                  </li>
                </nuxt-link>
                <nuxt-link :to="{ name: 'lang-about', params: { lang: $route.params.lang } }" v-slot="{href,navigate,isActive}" custom>
                  <li @click="navigate" :class="isActive ? 'active-link' : null">
                    <a :href="href">{{ content.t2 }}</a>
                  </li>
                </nuxt-link>
                <nuxt-link :to="{name: 'lang-activities',params: { lang: $route.params.lang }}" v-slot="{href,navigate,isActive}" custom>
                  <li @click="navigate" :class="isActive ? 'active-link' : null">
                    <a :href="href">{{ content.t3 }}</a>
                  </li>
                </nuxt-link>
                <nuxt-link :to="{name: 'lang-projects', params: { lang: $route.params.lang },query: {category: 'all'}}" v-slot="{href,navigate,isActive}" custom>
                  <li @click="navigate" :class="isActive ? 'active-link' : null">
                    <a :href="href">{{ content.t4 }}</a>
                  </li>
                </nuxt-link>
                <nuxt-link :to="{name: 'lang-gallery',params: { lang: $route.params.lang }}"
                           v-slot="{href,navigate,isActive}" custom>
                  <li @click="navigate" :class="isActive ? 'active-link' : null">
                    <a :href="href">{{ content.t5 }}</a>
                  </li>
                </nuxt-link>
                <nuxt-link :to="{name: 'lang-catalog',params: { lang: $route.params.lang }}" v-slot="{href,navigate,isActive}" custom>
                  <li @click="navigate" :class="isActive ? 'active-link' : null">
                    <a :href="href">{{ content.t6 }}</a>
                  </li>
                </nuxt-link>
                <nuxt-link
                    :to="{ name: 'lang-blog', params: { lang: $route.params.lang },query: {category: 'all',page: 1} }"
                    v-slot="{href,navigate,isActive}" custom>
                  <li @click="navigate" :class="isActive ? 'active-link' : null">
                    <a :href="href">{{ content.t7 }}</a>
                  </li>
                </nuxt-link>
              </ul>
            </nav>
          </div>

          <div class="col-3 d-none d-lg-flex align-items-center justify-content-end">
            <div class="searchBtns">
              <i class="fal fa-search" v-if="!searching" @click="search(true)"></i>
              <i class="fal fa-times" v-else @click="search(false)"></i>
            </div>
            <nuxt-link
                class="btn-header lang"
                :to="{ to: $route.fullPath,query: $route.query, params: { lang: $route.params.lang === 'en' ? 'fa' : 'en' } }">
              {{ $route.params.lang === 'en' ? 'Fa' : 'En' }}
            </nuxt-link>
            <nuxt-link class="btn-header contact" :to="{ name: 'lang-contact', params: { lang: $route.params.lang } }">
              {{ content.t8 }}
            </nuxt-link>

          </div>

          <div class="searchBox d-none d-md-block" :class="searching? 'active-search' : null">
            <div class="container">
              <div class="row">
                <div class="col-12">
                  <form @submit.prevent="doSearch" class="searchInput">
                    <input type="text" name="search" id="searchInput" placeholder="عبارت مدنظر خود را جستجو کنید" v-model="searchableText">
                    <button type="submit">
                      <i class="fas fa-arrow-circle-left"></i>
                    </button>
                  </form>
                </div>
              </div>
            </div>
          </div>


          <div class="col-12 d-lg-none">
            <button @click="drawerHandle" class="icon-menu-open">
              <i class="fas fa-bars" style="font-size: 25px"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

    <div class="site--header--drawer" :class="[drawerVisible ? 'isOpen' : '', routeName === 'lang' && 'drawer']">
      <div class="headerDrawer">
        <div>
          <img src="/img/logo.svg" alt="OrisOxin logo"/>
        </div>
        <button @click="drawerHandle" class="icon-menu-close">
          <i class="fas fa-times fa-2x"></i>
        </button>
      </div>
      <div class="drawer-body">
        <ul @click="drawerHandle">
          <li class="link1">
            <nuxt-link class="li-link" :to="{ name: 'lang', params: { lang: $route.params.lang } }" exact>
              <i class="fas fa-home"></i>
              {{ content.t1 }}
            </nuxt-link>
          </li>
          <li class="link2">
            <nuxt-link class="li-link" :to="{name: 'lang-about',params: { lang: $route.params.lang }}">
              <i class="fas fa-info-circle"></i>
              {{ content.t2 }}
            </nuxt-link>
          </li>
          <li class="link3">
            <nuxt-link class="li-link" :to="{name: 'lang-activities',params: { lang: $route.params.lang }}">
              <i class="fas fa-check-circle"></i>
              {{ content.t3 }}
            </nuxt-link>
          </li>
          <li class="link4">
            <nuxt-link class="li-link" :to="{name: 'lang-projects',params: { lang: $route.params.lang },query: {category: 'all'}}">
              <i class="fas fa-project-diagram"></i>
              {{ content.t4 }}
            </nuxt-link>
          </li>
          <li class="link5">
            <nuxt-link class="li-link" :to="{name: 'lang-gallery',params: { lang: $route.params.lang }}">
              <i class="fas fa-images"></i>
              {{ content.t5 }}
            </nuxt-link>
          </li>
          <li class="link6">
            <nuxt-link class="li-link" :to="{name: 'lang-catalog',params: { lang: $route.params.lang }}">
              <i class="fas fa-clipboard-list"></i>
              {{ content.t6 }}
            </nuxt-link>
          </li>
          <li class="link7">
            <nuxt-link class="li-link" :to="{ name: 'lang-blog', params: { lang: $route.params.lang },query: {category: 'all',page: 1}}">
              <i class="fas fa-blog"></i>
              {{ content.t7 }}
            </nuxt-link>
          </li>
        </ul>

        <div class="btn-drawer">
          <div class="row">
            <div class="col-6 mb-2">
              <nuxt-link class="li-link-btn btn-contact-drawer link8" :to="{name: 'lang-contact',params: { lang: $route.params.lang }}"
                         @click.native="drawerHandle">
                {{ content.t8 }}</nuxt-link>
            </div>
            <div class="col-5">
              <nuxt-link
                  class="li-link-btn btn-contact-drawer link8"
                  :to="{ to: $route.fullPath,query: $route.query, params: { lang: $route.params.lang === 'en' ? 'fa' : 'en' } }">
                {{ $route.params.lang === 'en' ? 'Fa' : 'En' }}
              </nuxt-link>
            </div>
            <div class="col-12">
              <div class="searchBox d-block d-lg-none">
                <form @submit.prevent="doSearch" class="searchInput">
                  <input type="text" name="search" id="searchInput1" placeholder="عبارت مدنظر خود را جستجو کنید" v-model="searchableText">
                  <button type="submit">
                    <i class="fas fa-arrow-circle-left"></i>
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="drawer-BG"></div>
    </div>
  </header>
</template>


<script>
export default {
  data() {
    return {
      drawerVisible: false,
      scrollPosition: null,
      blogPosts: null,
      searching: false,
      searchableText: '',
    }
  },
  methods: {
    drawerHandle() {
      this.drawerVisible = !this.drawerVisible
      const en = this.$route.params.lang === 'en'
      this.$gsap.timeline()
          .fromTo($(".headerDrawer"), {opacity: 0}, {opacity: 1, duration: 1})
          .fromTo($(".drawer-body ul li"), {x: en ? -100 : 100, opacity: 0}, {x: 0, opacity: 1, duration: 0.2, stagger: 0.1}, 0)
          .fromTo($(".link8"), {y: 20, opacity: 0}, {y: 0, opacity: 1, duration: .2}, '-=0.3')
    },
    updateScroll() {
      this.scrollPosition = window.scrollY
    },
    search(status) {
      this.searching = status
      if (status) setTimeout(() => $('#searchInput').focus(), 100)
      else this.searchableText = ''
    },
    doSearch() {
      // if (this.searchableText.length) {
      //   window.open(`https://www.google.com/search?q=${this.searchableText}+site%3Ahttps%3A//orisoxin.com/`, "_blank");
      //   setTimeout(() => this.search(false), 100)
      // } else {
      //   this.$message({
      //     type: 'warning',
      //     message: 'ابتدا عبارت مورد نظر را بنویسید'
      //   })
      // }
      if (this.searchableText.length) {
        this.$router.push({name: 'lang-search', params: {lang: this.$route.params.lang}, query: {terms: this.searchableText}})
        setTimeout(() => this.search(false), 100)
      } else {
        this.$message({
          type: 'warning',
          message: 'ابتدا عبارت مورد نظر را بنویسید'
        })
      }
    },
  },
  mounted() {
    $(document).ready(() => {
      this.$gsap.timeline()
          .fromTo($(".site--header"), {opacity: 0}, {opacity: 1, duration: 1})

      $(window).scroll(e => {
        if ($(window).scrollTop() > 100) {
          $('.site--header').addClass('hasBG')
          $('.site--header--drawer').addClass('hasBG')
        } else {
          $('.site--header').removeClass('hasBG')
        }

        // if (window.scrollY > 904 && this.routeName === 'lang' && this.blogPosts.docs.length) $('.header').addClass('_header')
        // else $('.header').removeClass('_header')
        // if (window.scrollY < 905 && this.routeName === 'lang' && this.blogPosts.docs.length) $('.header').addClass('__header')
        // else $('.header').removeClass('__header')
      })
    });
    window.addEventListener('scroll', this.updateScroll);
  },

  computed: {
    content() {
      return this.$store.state.content.header[this.$route.params.lang]
    },
    routeName() {
      return this.$route.name
    }
  },

  async fetch() {
    this.blogPosts = await this.$axios.get('/api/public/blogPosts?category=all&page=1').then(res => res.data)
        .catch(e => console.log('e', e))
  }
}
</script>