Files
ghatreh_user/src/layouts/mobile/MobileOverflowMenu.vue
T

118 lines
3.8 KiB
Vue
Raw Normal View History

2026-06-29 22:43:28 +03:30
<template>
<Transition>
<div
v-if="show"
class="top-0 bottom-0 bg-black wrap-fix z-2000 opacity-60"
@click="$emit('close')"
/>
</Transition>
<Transition name="slide-fade">
<div v-if="show" class="wrap-fix bottom-11vh z-2000">
<div class="relative flex flex-col items-center">
<div
class="flex items-center justify-center bg-white rounded-full w-[30px] h-[30px] mb-2"
@click="$emit('close')"
>
<BasicIcon icon="vuesax-linear:close-circle" />
</div>
<div class="flex flex-col items-center gap-2">
<BasicButton
icon-size="16"
class="!font-bold w-15rem"
@click="go('user')"
>
<div class="flex gap-2 items-center">
<BasicIcon icon="vuesax-linear:user" size="16" class="absolute right-2" />
<div>حساب کاربری</div>
</div>
</BasicButton>
<BasicButton
v-if="authenticated"
icon-size="16"
class="!font-bold w-15rem"
@click="go('physicalReceive')"
>
<div class="flex gap-2 items-center">
<BasicIcon icon="vuesax-linear:direct-inbox" size="16" class="absolute right-2" />
<div>دریافت طلای فیزیکی</div>
</div>
</BasicButton>
<BasicButton
v-if="authenticated"
icon-size="16"
class="!font-bold w-15rem"
@click="go('buyProduct')"
>
<div class="flex gap-2 items-center">
<BasicIcon icon="vuesax-linear:coin" size="16" class="absolute right-2" />
<div>خرید محصول</div>
</div>
</BasicButton>
<BasicButton
v-if="authenticated"
icon-size="16"
class="!font-bold w-15rem"
@click="go('list')"
>
<div class="flex gap-2 items-center">
<BasicIcon icon="vuesax-linear:receipt-item" size="16" class="absolute right-2" />
<div>لیست دریافتی ها</div>
</div>
</BasicButton>
<BasicButton
v-if="authenticated"
icon-size="16"
class="!font-bold w-15rem"
@click="go('giftCard')"
>
<div class="flex gap-2 items-center">
<BasicIcon icon="vuesax-linear:gift" size="16" class="absolute right-2" />
<div>ثبت کارت هدیه</div>
</div>
</BasicButton>
<BasicButton icon-size="16" class="!font-bold w-15rem" @click="go('about')">
<div class="flex gap-2 items-center">
<BasicIcon icon="vuesax-linear:info-circle" size="16" class="absolute right-2" />
<div>درباره ما</div>
</div>
</BasicButton>
<BasicButton
v-if="authenticated"
icon-size="16"
class="!font-bold w-15rem"
@click="go('rules')"
>
<div class="flex gap-2 items-center">
<BasicIcon icon="vuesax-linear:task" size="16" class="absolute right-2" />
<div>قوانین و مقررات</div>
</div>
</BasicButton>
</div>
</div>
</div>
</Transition>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import { isToken } from '@/utils'
defineProps<{
show: boolean
}>()
const emit = defineEmits<{
close: []
navigate: [routeName: string]
}>()
const authenticated = computed(() => isToken())
function go(routeName: string) {
emit('navigate', routeName)
emit('close')
}
</script>