barg-restuarant/components/OffcanvasMenu.vue

<template>
  <div class="offCanvas">
    <div class="scrollable">
      <div class="nav--links">
        <ul>
          <li>
            <nuxt-link :to="{name: 'index'}">صفحه اصلی</nuxt-link>
          </li>
          <li>
            <p @click="showMenu" class="accordion">
              <svg
              :class="{'rotate' : menuCollape}"
              width="15"
              height="15"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
          >
              <path
                  d="M15.0001 19.9201L8.48009 13.4001C7.71009 12.6301 7.71009 11.3701 8.48009 10.6001L15.0001 4.08008"
                  stroke="#fff"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
              />
          </svg>
              <span>منو</span>
            </p>

          <div class="panel" v-if="menuCollape">
            <li>
              <nuxt-link :to="{name: 'menu'}">- منوی رستوران برگ</nuxt-link>
            </li>
            <li>
              <nuxt-link :to="{name: 'cateringmenu'}">- منو کترینگ برگ</nuxt-link>
            </li>
            <li>
                <nuxt-link :to="{name: 'showplacecateringmenu'}">- منو کترینگ نمایشگاهی</nuxt-link>
              </li>
            <li>
              <nuxt-link :to="{name: 'companiescateringmenu'}">- منو کترینگ شرکت ها</nuxt-link>
            </li>
          </div>
        </li>
          <li>
            <nuxt-link :to="{name: 'subscriber-affairs'}">امور مشترکین</nuxt-link>
          </li>


          <li>
            <p @click="showMenu2" class="accordion2">
              <svg
              :class="{'rotate2' : menuCollape2}"
              width="15"
              height="15"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
          >
              <path
                  d="M15.0001 19.9201L8.48009 13.4001C7.71009 12.6301 7.71009 11.3701 8.48009 10.6001L15.0001 4.08008"
                  stroke="#fff"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
              />
          </svg>
              <span>درباره ما</span>
            </p>


            <div class="panel2" v-if="menuCollape2">
              <li>
                <nuxt-link :to="{name: 'about'}">- درباره برگ</nuxt-link>
              </li>
              <li>
                <nuxt-link :to="{name: 'gallery'}">- گالری تصاویر</nuxt-link>
              </li>
              <li>
                <nuxt-link :to="{name: 'social-responsibility'}">- مسئولیت اجتماعی</nuxt-link>
              </li>
              <li>
                <nuxt-link :to="{name: 'franchise'}">- فرانچایز</nuxt-link>
              </li>


              </div>

            </li>



          <li>
            <nuxt-link :to="{name: 'contact'}">تماس با ما</nuxt-link>
          </li>
          <li>
            <nuxt-link :to="{name:'applanding2'}">دانلود اپلیکیشن</nuxt-link>
          </li>
          <li>
            <nuxt-link :to="{name:'qrlanding'}">شبکه های اجتماعی</nuxt-link>
          </li>
        </ul>
      </div>
      <div class="social">
          <ul v-if="storeInfo && storeInfo.socials">
            <li v-if="storeInfo.socials.whatsaap">
              <a :href="storeInfo.socials.whatsaap" target="_blank">
                <IconsWhatsApp/>
              </a>
            </li>
            <li v-if="storeInfo.socials.twitter">
              <a :href="storeInfo.socials.twitter" target="_blank">
                <IconsTweeter/>
              </a>
            </li>
            <li v-if="storeInfo.socials.facebook">
              <a :href="storeInfo.socials.facebook" target="_blank">
                <IconsFacebook/>
              </a>
            </li>
            <li v-if="storeInfo.socials.instagram">
              <a :href="storeInfo.socials.instagram" target="_blank">
                <IconsInstagram/>
              </a>
            </li>
            <li v-if="storeInfo.socials.googlePlus">
              <a :href="storeInfo.socials.googlePlus" target="_blank">
                <IconsGooglePlus/>
              </a>
            </li>
          </ul>
      </div>
      <div class="copyRight">
        <h4>© COPYRIGHT BY BARG RESTAURANT</h4>
        <p>DESIGNED AND DEVELOPED BY <a href="https://danakcorp.com" target="_blank">DANAK CORPORATION</a></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      storeInfo : null,
      menuCollape: false,
      menuCollape2: false
    }
  },
  methods: {
    showMenu(){
      this.menuCollape = !this.menuCollape
    },
      showMenu2(){
      this.menuCollape2 = !this.menuCollape2
    }
  },
  mounted() {
    //////////////////////////////////////////////////////////////////////////
    const offCanvasTL = this.$gsap.timeline({
      paused: true,
      onStart: () => {
        this.$store.commit('global_vars/changeOffCanvas', true)
        $('.offCanvas').css({display: 'block'})
        $('.hamburger--btn .bars').addClass('close')
        $('.hamburger--btn').addClass('hamburger--close--btn')
        setTimeout(function () {
          $('body').addClass('offCanvas--active')
        }, 200)
      },
      onReverseComplete: () => {
        this.$store.commit('global_vars/changeOffCanvas', false)
        $('.offCanvas').css({display: 'none'})
        $('.hamburger--btn .bars').removeClass('close')
        $('.hamburger--btn').removeClass('hamburger--close--btn')
        $('body').removeClass('offCanvas--active')
      }
    })

    offCanvasTL
        .to($('.offCanvas'), {bottom: 0, duration: 0.3})
        .from($(".offCanvas .nav--links ul li"), {y: 30, opacity: 0, scale: 0.9, stagger: 0.05, duration: 0.3})
        .from($(".offCanvas .social ul"), {y: 30, opacity: 0, scale: 0.9, duration: 0.3}, '-=0.3')
        .from($(".offCanvas .copyRight h4"), {y: 30, opacity: 0, scale: 0.9, duration: 0.3}, '-=0.2')
        .from($(".offCanvas .copyRight p"), {y: 30, opacity: 0, scale: 0.9, duration: 0.3}, '-=0.2')

    $('.hamburger--btn').click(() => {
      if (!this.$store.state.global_vars.offCanvas) {
        offCanvasTL.timeScale(1).play()
      } else {
        offCanvasTL.timeScale(2).reverse()
      }
    })
  },
  async fetch() {
    try {
      const storeInfo = await this.$axios.get(`/api/public/storeInfo/`)
      this.storeInfo = storeInfo.data
    } catch (e) {
      console.log('footer ******' , e.message)
    }
  },
}

</script>


<style scoped>
.accordion {
  cursor: pointer;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: center;
padding: 5px;
  transition: 1s ease-out;
  color: white;
}

.panel {
width: 100%;
  overflow: hidden;
  transition: 1s ease-out;
  margin-top: 5px;
}
.rotate{
  rotate: -90deg;
}
.accordion2 {
  cursor: pointer;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: center;
  padding: 6px;
  transition: 1s ease-out;
  color: white;
}

.panel2 {
width: 100%;
  overflow: hidden;
  transition: 1s ease-out;
  margin-top: 5px;
}
.rotate2{
  rotate: -90deg;
}
</style>