asan-service/components/header/MobileMenu.vue

<template>
  <aside class="mobile-menu">
    <nav class="body">
      <ul>
        <nuxt-link :to="{ name: 'announcements' }" tag="li">
              <a>اطلاعیه ها </a>
        </nuxt-link>
        <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>
        <nuxt-link :to="{ name: 'download', query: { category: 'all', page: 1 } }" tag="li">
          <a>دانلود</a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'about' }" tag="li">
          <a>درباره ما</a>
        </nuxt-link>
        <li>
              <a href="https://jobs.asan-service.com" >همکاری</a>
            </li>
      </ul>
      <div class="title">
        <!--				<span>نمایندگی</span>-->
      </div>
      <ul>
        <nuxt-link :to="{ name: 'agents' }" tag="li">
          <a>لیست نمایندگان</a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'agent-benefits' }" tag="li">
          <a>مزایای نمایندگی</a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'representation' }" tag="li">
          <a>اخذ نمایندگی</a>
        </nuxt-link>
      </ul>
      <div class="title">
        <!--				<span>راهنما</span>-->
      </div>
      <ul>
        <nuxt-link :to="{ name: 'learning', query: { page: 1 } }" tag="li">
          <a>آموزش</a>
        </nuxt-link>
        <nuxt-link :to="{ name: 'FAQ' }" tag="li">
          <a>سوالات متداول</a>
        </nuxt-link>
      </ul>
      <div class="title">
        <!--				<span>حساب کاربری</span>-->
      </div>
      <ul>
        <nuxt-link :to="isUser ? { name: 'account' } : { name: 'auth-login-register' }" tag="li">
          <a>
            <span v-if="isUser">{{ $auth.user.first_name + ' ' + $auth.user.last_name }}</span>
            <span v-else>ورود</span>
            <!-- user icon -->
            <i v-if="isUser && userHasNotification" class="notificationAnim fas fa-bell"></i>
            <i v-else class="fal fa-user"></i>
          </a>
        </nuxt-link>
      </ul>
    </nav>
    <div class="bg" @click="menu(false)"></div>
  </aside>
</template>

<script>
export default {
  computed: {
    mobileMenu() {
      return this.$store.state.front.mobileMenu
    },
    isUser() {
      return this.$auth.loggedIn && this.$auth.user.scope.includes('user')
    },
    userHasNotification() {
      return this.$store.state.front.unreadTickets + this.$store.state.front.agentInbox
    }
  },
  mounted() {
    $('#menu').click(() => {
      this.menu(!this.mobileMenu)
    })
    $('.mobile-menu ul li').click(() => {
      this.menu(false)
    })
  },
  methods: {
    menu(action) {
      const _DU = 0.5
      const _EASE = 'power4.inOut'
      this.$gsap
        .timeline({
          onComplete: () => {
            if (!action) $('.mobile-menu').css({ display: 'none' })
          }
        })
        .set($('.mobile-menu'), { display: 'block' })
        .fromTo(
          $('.mobile-menu .body'),
          { left: action ? -250 : 0 },
          { left: action ? 0 : -250, duration: _DU, ease: _EASE }
        )
        .fromTo(
          $('.mobile-menu .body li'),
          {
            x: action ? -30 : 0,
            opacity: action ? 0 : 1
          },
          {
            x: action ? 0 : -30,
            opacity: action ? 1 : 0,
            duration: _DU,
            ease: _EASE
          },
          '-=0.4'
        )
        .fromTo(
          $('.mobile-menu .bg'),
          {
            opacity: action ? 0 : 1
          },
          {
            opacity: action ? 1 : 0,
            duration: _DU
          },
          0
        )
        .to(
          $('#menu'),
          {
            opacity: 0,
            scale: 0.9,
            duration: _DU / 2,
            onComplete: () => {
              this.$store.commit('front/toggleMobileMenu')
            }
          },
          0
        )
        .to($('#menu'), { opacity: 1, scale: 1, duration: _DU / 2 }, _DU / 2)
    }
  }
}
</script>