ghatreh_user/src/layouts/mobile/MobileOverflowMenu.vue

<template>
  <Transition>
    <div
      v-if="show"
      class="top-0 bottom-0 bg-black wrap-fix z-5000 opacity-60"
      @click="$emit('close')"
    />
  </Transition>
  <Transition name="slide-fade">
    <div v-if="show" class="wrap-fix bottom-11vh z-5000 flex justify-center items-end">
      <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('notifyTrigger')"
          >
            <div class="flex gap-2 items-center">
              <BasicIcon icon="vuesax-linear:bill" 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 && trackingSystemsEnabled"
            icon-size="16"
            class="!font-bold w-15rem"
            @click="go('recoverySites')"
          >
            <div class="flex gap-2 items-center">
              <BasicIcon icon="vuesax-linear:global" 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 { useTrackingSystemsFeature } from '@/composables/useTrackingSystemsFeature'
import { isToken } from '@/utils'

defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  close: []
  navigate: [routeName: string]
}>()

const authenticated = computed(() => isToken())
const { trackingSystemsEnabled } = useTrackingSystemsFeature()

function go(routeName: string) {
  emit('navigate', routeName)
  emit('close')
}
</script>