ShowEasyFrontEnd/FrontEnd/components/newDrawer.vue

<template>
  <!-- v-click-outside="closeDrawer" -->
  <div :class="[
    'tw-overflow-auto tw-fixed tw-top-0 tw-bottom-0 tw-left-0 tw-right-0 tw-w-full tw-h-full tw-z-10',
    drawerAcitve ? '' : 'tw-pointer-events-none',
  ]">
    <div :class="[
      'tw-bg-black tw-top-0 tw-bottom-0 tw-left-0 tw-w-full tw-h-full tw-fixed tw-overflow-auto tw-z-10 tw-transition-all tw-duration-600',
      drawerAcitve ? 'tw-opacity-80' : 'tw-pointer-events-none tw-opacity-0',
    ]" @click="closeDrawer"></div>
    <div ref="drawer" :class="[
      'drawer tw-bg-white tw-absolute tw-z-20 tw-overflow-auto tw-px-[20px] tw-py-[30px] tw-w-4/5 tw-h-full tw-transition-all tw-duration-300 tw-delay-75 tw-ease-in-out tw-rounded-none md:tw-px-[40px] md:tw-py-[40px]',
      drawerAcitve ? 'tw-translate-x-0' : '-tw-translate-x-full',
    ]">
      <div class="tw-flex tw-flex-col tw-justify-between tw-h-full">
        <div class="tw-flex tw-flex-col">
          <div class="tw-mb-[25px] tw-pb-[25px] tw-border-0 tw-border-b tw-border-solid tw-border-neutrals-200">
            <a :href="localePath('/exhibition')"
              :class="['tw-block tw-body-3 tw-text-neutral-800 tw-mb-[30px] md:tw-body-2',$route.path.match('\/exhibition') ? 'tw-text-primary-default' : '']">
              {{ $t('Exhibition')}}</a>

            <exhibitionList v-for="(item, index) in exhibitionsCategory" :key="item.id" :exhibitionIndex="index"
              :exhibitionCategory="item" :exhibitionListIcon="exhibitionListIcon[index]" @activeIndex="getActiveIndex"
              :exhibitionsActiveIndex="
                exhibitionsActiveIndex == index ? true : false
              "></exhibitionList>
          </div>
          <div class="tw-mb-[25px] tw-pb-[25px] tw-border-0 tw-border-b tw-border-solid tw-border-neutrals-200">
            <a :href="localePath('/service')"
              :class="['tw-block tw-body-3 tw-text-neutral-800 tw-mb-[30px] md:tw-body-2',$route.path.match('\/service') ? 'tw-text-primary-default' : '']">
              {{ $t('Service')}}</a>
            <serviceList v-for="(item, index) in serviceCategory" :key="item.id" :serviceIndex="index"
              :servicecategory="item" :serviceListIcon="serviceListIcon[index]" @activeIndex="getServiceActiveIndex"
              :serviceActiveIndex="serviceActiveIndex == index ? true : false">
            </serviceList>
          </div>
          <div>
            <a href="https://medium.com/showeasy" target="_blank" class="tw-body-3 md:tw-body-2">{{ $t("Blog") }}</a>
          </div>
        </div>
        <div class="tw-flex-col tw-items-end tw-mt-[40px] tw-pb-[30px] md:tw-mt-[80px] md:tw-pb-[60px]">
          <client-only>
            <changeCurrency></changeCurrency>
          </client-only>
          <div
            class="changeLanguage tw-flex tw-items-center tw-border-solid tw-border-[1px] tw-border-neutrals-200 tw-bg-white tw-text-neutrals-800 tw-rounded-[16px] tw-mb-[16px]">
            <select v-model="lang"
              class="t14 tw-font-normal tw-w-full tw-my-[12px] tw-mx-[25px] md:t16 focus:tw-outline-none">
              <option class="tw-mb-[30px] md:tw-body-3" v-for="(item, index) in $i18n.locales" :key="index"
                :value="item.code">
                {{ item.text }}
              </option>
            </select>
            <img src="@/assets/svg/down-arrow.svg" class="tw-mr-[20px]" alt="" />
          </div>
          <a class="tw-block t14 tw-font-normal tw-border-solid tw-border-[1px] tw-border-neutrals-200 tw-bg-white tw-text-neutrals-800 tw-rounded-[16px] tw-py-[12px] tw-px-[25px] md:t16"
            href="/faq" @click="this.$store.dispatch('toggleDrawer', true)">
            {{ $t("Help") }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import changeCurrency from "@/components/dropdown/changeCurrency.vue";
import exhibitionList from "@/components/dropdown/exhibitionList.vue";
import serviceList from "@/components/dropdown/serviceList.vue";
import { object } from "is_js";
export default {
  props: {
    serviceCategory: {
      type: Array,
    },
    exhibitionsCategory: {
      type: Array,
    },
    exhibitionListIcon: {
      type: Array
    },
    serviceListIcon: {
      type: Array
    },
  },
  data() {
    return {
      lang: "en",
      // show: false,
      exhibitionsActiveIndex: "",
      serviceActiveIndex: "",
    };
  },
  components: {
    changeCurrency,
    exhibitionList,
    serviceList,
  },
  computed: {
    drawerAcitve() {
      return this.$store.getters.getDrawerStatus;
    },
  },
  created() {
    this.$i18n.locale === "en" ? (this.lang = "en") : (this.lang = "zh-tw");
    // this.contents = [
    //     "Rental cars",
    //     "Flower",
    //     "Hotel",
    //     "SIM Card",
    // ];
  },
  mounted() {
    // vm.$refs.drawer.scrollTo(0, 0);
  },
  methods: {
    closeDrawer() {
      if (this.$store.getters.getDrawerStatus === true) {
        this.$store.dispatch("toggleDrawer", false);
      }
    },
    getActiveIndex(data) {
      this.exhibitionsActiveIndex = data;
    },
    getServiceActiveIndex(data) {
      this.serviceActiveIndex = data;
    },
  },
  watch: {
    lang: {
      handler: function () {
        if (this.lang === "en") {
          this.$i18n.setLocale(this.lang);
        } else {
          this.$i18n.setLocale(this.lang);
        }
        this.$store.dispatch("toggleDrawer", false);
        this.$emit('changeLang', true);
      },
    },
    drawerAcitve: {
      handler: function () {
        if (this.drawerAcitve == true) {
          this.$refs.drawer.scrollTo(0, 0);
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.drawer {
  &.show {
    left: 0;
  }
}

.drawer-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: #ee9546;
}
</style>