asan-service/components/header/SiteHeader.vue

<template>
  <header class="site--header">
    <div class="container-fluid">
      <div class="row">
        <nav class="col-6 col-sw-2 logo">
          <nuxt-link :to="{ name: 'index' }">
            <logo />
          </nuxt-link>
        </nav>
        <nav class="col-8 d-none d-sw-block">
          <ul class="links">
            <nuxt-link :to="{ name: 'announcements' }" tag="li">
              <a>اطلاعیه ها </a>
            </nuxt-link>

            <li
              class="dropDown-container gps"
              :class="agentsDropDownActiveClass && 'active'"
              @mouseenter="openDrop('gps')"
              @mouseleave="closeDrop('gps')"
            >
              <a>
                <span>مسیریاب (GPS)</span>
                <i class="fas fa-angle-down"></i>
              </a>
              <div class="drop-down">
                <a href="https://installer.asan-service.com/" target="_blank"> نرم افزار نصاب </a>
                <a href="https://gps.asan-service.com/" target="_blank"> نرم افزار ردیاب </a>
                <a href="/apps"> دانلود </a>
                <a href="#"> آموزش </a>
              </div>
            </li>

            <li
              class="dropDown-container help"
              :class="helpDropDownActiveClass && 'active'"
              @mouseenter="openDrop('help')"
              @mouseleave="closeDrop('help')"
            >
              <a>
                <span>راهنما</span>
                <i class="fas fa-angle-down"></i>
              </a>
              <div class="drop-down">
                <nuxt-link
                  :to="{ name: 'learning', query: { page: 1 } }"
                  :class="$route.name.includes('learning') && 'active'"
                  >آموزش</nuxt-link
                >
                <nuxt-link :to="{ name: 'FAQ' }">سوالات متداول</nuxt-link>
              </div>
            </li>
            <nuxt-link :to="{ name: 'index' }" exact tag="li">
              <a>استعلام گارانتی</a>
            </nuxt-link>
            <nuxt-link :to="{ name: 'warranty-terms', query: { page: 1 } }" tag="li">
              <a>شرایط گارانتی</a>
            </nuxt-link>

            <li
              class="dropDown-container agents"
              :class="agentsDropDownActiveClass && 'active'"
              @mouseenter="openDrop('agents')"
              @mouseleave="closeDrop('agents')"
            >
              <a>
                <span>نمایندگان</span>
                <i class="fas fa-angle-down"></i>
              </a>
              <div class="drop-down">
                <nuxt-link :to="{ name: 'agents' }">لیست نمایندگان</nuxt-link>
                <nuxt-link :to="{ name: 'agent-benefits' }">مزایای نمایندگی</nuxt-link>
                <nuxt-link :to="{ name: 'representation' }" :exact="false">اخذ نمایندگی</nuxt-link>
              </div>
            </li>

            <nuxt-link
              :to="{ name: 'download', query: { category: 'all', page: 1 } }"
              :class="$route.name.includes('download') && 'active'"
              tag="li"
            >
              <a>دانلود ها</a>
            </nuxt-link>

            <li
              class="dropDown-container contactus"
              :class="contactusDropDownActiveClass && 'active'"
              @mouseenter="openDrop('contactus')"
              @mouseleave="closeDrop('contactus')"
            >
              <a>
                <span>ارتباط با ما</span>
                <i class="fas fa-angle-down"></i>
              </a>

              <div class="drop-down">
                <nuxt-link :to="{ name: 'about' }">درباره ما </nuxt-link>
                <nuxt-link :to="{ name: 'contact' }">تماس با ما </nuxt-link>
                <nuxt-link :to="{ name: 'complaint' }"> ثبت شکایت </nuxt-link>

                <nuxt-link :to="{ name: 'survey' }"> نظرسنجی </nuxt-link>
                <a href="https://jobs.asan-service.com">همکاری</a>
              </div>
            </li>

            <!-- <nuxt-link
              :to="{ name: 'complaint'}"
              :class="$route.name.includes('complaint') && 'active'"
              tag="li"
            >
              <a>ثبت شکایت</a>
            </nuxt-link>

            <nuxt-link
              :to="{ name: 'survey'}"
              :class="$route.name.includes('survey') && 'active'"
              tag="li"
            >
              <a>نظرسنجی</a>
            </nuxt-link> -->
          </ul>
        </nav>
        <nav class="col-2 d-none d-sw-flex account">
          <nuxt-link :to="isUser ? { name: 'account' } : { name: 'auth-login-register' }">
            <span v-if="isUser" class="singleLineTxt" :title="fullName">{{ fullName }}</span>
            <span v-else>ورود</span>
            <i v-if="isUser && userHasNotification" class="notificationAnim fas fa-bell"></i>
            <i v-else class="fal fa-user"></i>
          </nuxt-link>
        </nav>
        <div class="col-6 d-flex d-sw-none align-items-center justify-content-end menu">
          <i id="menu" class="far" :class="!mobileMenu ? 'fa-bars' : 'fa-chevron-left'"></i>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import WS_User from '@/mixins/WS_User'
import WS_Agent from '@/mixins/WS_Agent'
export default {
  mixins: [WS_User, WS_Agent],
  data() {
    return {}
  },
  computed: {
    mobileMenu() {
      return this.$store.state.front.mobileMenu
    },
    isUser() {
      return this.$auth.loggedIn && this.$auth.user.scope.includes('user')
    },
    userHasNotification() {
      const store = this.$store.state.front
      return store.unreadTickets + store.agentInbox + store.newUserAnnosCount + store.newAgentAnnosCount
    },
    helpDropDownActiveClass() {
      return this.$route.name === 'learning' || this.$route.name === 'learning-post+' || this.$route.name === 'FAQ'
    },
    agentsDropDownActiveClass() {
      return this.$route.name === 'representation' || this.$route.name === 'agent-benefits'
    },
    contactusDropDownActiveClass() {
      return this.$route.name === 'about' || this.$route.name === 'contact'
    },
    fullName() {
      return this.$auth.user.first_name + ' ' + this.$auth.user.last_name
    }
  },
  methods: {
    openDrop(name) {
      $(`.dropDown-container.${name}`).addClass('d-active')
    },
    closeDrop(name) {
      $(`.dropDown-container.${name}`).removeClass('d-active')
    }
  }
}
</script>
<style scoped></style>