ShowEasyFrontEnd/FrontEnd/components/mobileUserInfoPopup.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 tw-transition-all tw-duration-300 tw-ease-in-out ',
    show ? '' : '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',
      show ? 'tw-opacity-80' : 'tw-pointer-events-none tw-opacity-0',
    ]" @click="close()"></div>
    <div ref="mobileUserInfo" :class="[
      'mobileUserInfo tw-bg-white tw-absolute tw-left-0 tw-right-0 tw-top-0 tw-bottom-0 tw-m-auto tw-z-20 tw-overflow-auto  tw-w-4/5 tw-h-fit tw-transition-all tw-duration-300 tw-delay-75 tw-ease-in-out tw-rounded-[20px] md:tw-w-2/5',
      show ? 'tw-translate-y-0' : 'tw-pointer-events-none tw-translate-y-[200%]',
    ]">
      <div class="tw-grid tw-grid-cols-2 tw-grid-rows-4 tw-p-[15px]">
        <nuxt-link :to="localePath('/user/editPersonalInfo')" class="tw-flex tw-flex-col tw-items-center tw-py-[15px]"
          @click.native="close()">
          <div class="tw-max-w-[40px] tw-max-h-[40px] tw-bg-neutrals-100 tw-rounded-[10px] tw-mb-[10px] tw-p-[10px]">
            <img src="~/assets/svg/profile.svg" class="tw-max-w-[20px] tw-max-y-[20px]" alt="" />
          </div>

          <div class="tw-head-body tw-text-neutrals-900">{{ $t("userProfile.editPersonalInfo") }}</div>
        </nuxt-link>
        <!-- <nuxt-link :to="localePath('/user/myBooking')" class="tw-flex tw-flex-col tw-items-center tw-py-[15px]">
          <img src="~/assets/svg/myBooking_popup.svg" class="tw-max-w-[40px] tw-max-h-[40px] tw-mb-[10px]" alt="" />
          <div class="tw-head-body tw-text-neutrals-900">{{ $t('My Bookings') }}</div>
        </nuxt-link> -->
        <nuxt-link :to="localePath('/user/saveExhibition')" class="tw-flex tw-flex-col tw-items-center tw-py-[15px]"
          @click.native="close()">
          <img src="~/assets/svg/savedExhibitions_popup.svg" class="tw-max-w-[40px] tw-max-h-[40px] tw-mb-[10px]"
            alt="" />
          <div class="tw-head-body tw-text-neutrals-900">{{ $t('userProfile.savedExhibitions') }}</div>
        </nuxt-link>
        <!-- <nuxt-link :to="localePath('/user/saveService')" class="tw-flex tw-flex-col tw-items-center tw-py-[15px]"
          @click.native="close()">
          <img src="~/assets/svg/savedServices_popup.svg" class="tw-max-w-[40px] tw-max-h-[40px] tw-mb-[10px]" alt="" />
          <div class="tw-head-body tw-text-neutrals-900">{{ $t('userProfile.savedServices') }}</div>
        </nuxt-link> -->
        <nuxt-link :to="localePath('/user/companyInfo')" class="tw-flex tw-flex-col tw-items-center tw-py-[15px]"
          @click.native="close()">
          <img src="~/assets/svg/companyInfo_popup.svg" class="tw-max-w-[40px] tw-max-h-[40px] tw-mb-[10px]" alt="" />
          <div class="tw-head-body tw-text-neutrals-900">{{ $t('userProfile.companyInfo') }}</div>
        </nuxt-link>
        <nuxt-link :to="localePath('/user/contactInfo')" class="tw-flex tw-flex-col tw-items-center tw-py-[15px]"
          @click.native="close()">
          <img src="~/assets/svg/contactInfo_popup.svg" class="tw-max-w-[40px] tw-max-h-[40px] tw-mb-[10px]" alt="" />
          <div class="tw-head-body tw-text-neutrals-900">{{ $t('Contact Info') }}</div>
        </nuxt-link>
        <nuxt-link :to="localePath('/user/setting')" class="tw-flex tw-flex-col tw-items-center tw-py-[15px]"
          @click.native="close()">
          <img src="~/assets/svg/setting_popup.svg" class="tw-max-w-[40px] tw-max-h-[40px] tw-mb-[10px]" alt="" />
          <div class="tw-head-body tw-text-neutrals-900">{{ $t('userProfile.setting') }}</div>
        </nuxt-link>
        <button class="tw-flex tw-flex-col tw-items-center tw-py-[15px]" @click="logout()">
          <img src="~/assets/svg/logOut_popup.svg" class="tw-max-w-[40px] tw-max-h-[40px] tw-mb-[10px]" alt="" />
          <div class="tw-head-body tw-text-error-default">{{ $t('userProfile.logout') }}</div>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
    },
    width: {
      type: Number
    }
  },
  data() {
    return {};
  },
  computed: {},
  created() { },
  mounted() { },
  methods: {
    close() {
      this.$emit("popup", false);
    },
    logout() {
      this.$auth.$storage.removeUniversal("jwt");
      this.$auth.$storage.removeUniversal("userPicture");
      this.$auth.$storage.removeUniversal("userLastName");
      this.$auth.$storage.removeUniversal("userBeforePath");
      if (this.width < 1024) {
        this.$router.push(this.localePath("/"));
      } else {
        this.$router.push(this.localePath("/user"));
      }
      this.$auth.logout();
      this.$nuxt.refresh();
      this.$emit("popup", false);
    },
  },
};
</script>

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