ShowEasyFrontEnd/FrontEnd/components/Drawer.vue

<template>
  <v-navigation-drawer temporary v-model="drawerAcitve" app :width="$vuetify.breakpoint.smAndUp ? '668px' : '334px'"
    v-click-outside="closeDrawer">
    <v-card :width="$vuetify.breakpoint.smAndUp ? '668px' : '334px'" class="pt-10 elevation-0 px-10">
      <div :class="
        $vuetify.breakpoint.smOnly
          ? 'primary--text text-size-20 font-weight-medium pt-10 px-7 pb-5'
          : 'primary--text text-size-14 font-weight-medium pt-10 px-7 pb-5'
      ">
        <nuxt-link :to="localePath('/exhibition')" class="remove-underline">{{
        $t("Exhibition")
        }}</nuxt-link>
      </div>
      <v-divider class="my-3"></v-divider>
      <!-- <div class="primary--text text-size-20 font-weight-medium pt-5 px-7 pb-5">
        {{ $t('Service') }}
      </div> -->
      <!-- <div v-for="(item,index) in contents" class="text-size-20 py-5 pe-7 ps-15">
        {{ item }}
      </div> -->
      <!-- <v-divider class="my-3"></v-divider> -->
      <div class="pt-5 px-7 pb-5">
        <a v-if="$i18n.locale == 'zh-tw'" href="https://medium.com/showeasy" target="_blank" :class="
          $vuetify.breakpoint.smOnly
            ? 'remove-underline primary--text text-size-20 font-weight-medium'
            : 'remove-underline primary--text text-size-16 font-weight-medium'
        ">{{ $t("Blog") }}</a>
        <a v-else href="https://medium.com/showeasy-eng" target="_blank" :class="
          $vuetify.breakpoint.smOnly
            ? 'remove-underline primary--text text-size-20 font-weight-medium'
            : 'remove-underline primary--text text-size-16 font-weight-medium'
        ">{{ $t("Blog") }}</a>
      </div>
      <v-divider class="mt-3"></v-divider>
      <v-spacer style="padding-top: 160px" class="flex-column align-end">
        <v-select outlined hide-details :items="$i18n.locales" item-text="text" item-value="code" v-model="lang"
          class="border-radius-16 mb-5"></v-select>
        <nuxt-link class="remove-underline" :to="localePath('/faq')">
          <v-btn height="56px" width="100%" outlined hide-details class="border-radius-16 justify-start"
            style="border-color: rgba(0, 0, 0, 0.42)">
            {{ $t("Help") }}
          </v-btn>
        </nuxt-link>
      </v-spacer>
    </v-card>
  </v-navigation-drawer>
</template>

<script>
import changeCurrency from "@/components/dropdown/changeCurrency.vue";
export default {
  data() {
    return {
      lang: "en",
    };
  },
  components: {
    changeCurrency,
  },
  computed: {
    drawerAcitve: {
      get() {
        return this.$store.getters.getDrawerStatus;
      },
      set() { },
    },
  },
  created() {
    this.$i18n.locale === "en" ? (this.lang = "en") : (this.lang = "zh-tw");
    // this.contents = [
    //     "Rental cars",
    //     "Flower",
    //     "Hotel",
    //     "SIM Card",
    // ];
  },

  methods: {
    closeDrawer() {
      if (this.$store.getters.getDrawerStatus === true) {
        this.$store.dispatch("toggleDrawer", flase);
      }
    },
  },
  watch: {
    lang: {
      handler: function () {
        if (this.lang === "en") {
          this.$i18n.setLocale(this.lang);
        } else {
          this.$i18n.setLocale(this.lang);
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.drawer {
  position: fixed;
  z-index: 10 !important;
}

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