You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
5.0 KiB
109 lines
5.0 KiB
<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("authtoken");
|
|
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>
|