boursecu_user/src/layouts/mobile/MobileBottomNav.vue

<template>
  <div class="bottom-appbar w-auto mx-auto bg-white">
    <div class="tabs bottom-0">
      <div
        v-if="isBoursecu"
        :class="navItemClass('buyProduct')"
        class="tab"
        @click="$emit('navigate', 'buyProduct')"
      >
        <div class="tab__icon">
          <img
            :src="boursecuBuySellIcon"
            alt=""
            class="tab__icon-image"
          />
        </div>
        <div class="text-xs mt-1 font-bold">خرید و فروش</div>
      </div>
      <div
        v-else
        :class="navItemClass('home')"
        class="tab"
        @click="$emit('navigate', 'home')"
      >
        <div class="tab__icon">
          <Icon icon="vuesax-linear:home" size="24" />
        </div>
        <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
      </div>

      <div
        :class="navItemClass('transactions')"
        class="tab"
        @click="$emit('navigate', 'transactions')"
      >
        <div class="tab__icon">
          <img
            v-if="isBoursecu"
            :src="boursecuTransactionsIcon"
            alt=""
            class="tab__icon-image"
          />
          <Icon v-else icon="vuesax-linear:receipt-item" size="24" />
        </div>
        <div class="text-xs mt-1 font-bold">تراکنش ها</div>
      </div>

      <div
        v-if="isBoursecu"
        :class="navItemClass('home')"
        class="tab"
        @click="$emit('navigate', 'home')"
      >
        <div class="tab__icon">
          <img
            :src="boursecuHomeIcon"
            alt=""
            class="tab__icon-image"
          />
        </div>
        <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
      </div>
      <div v-else class="main_in" @click="$emit('navigate', 'buyProduct')">
        <div
          class="circle_in"
          :class="isWhiteNavLogo ? 'is-white-nav-logo' : 'text-white'"
        >
          <div class="circle_into">
            <div
              v-if="projectName === 'garoosi'"
              class="p-2 text-tertiary flex flex-col justify-center items-center"
            >
              <Icon icon="vuesax-linear:coin" />
              <div class="text-[9px] font-bold">محصولات</div>
            </div>
            <img
              v-else
              class="p-2"
              :src="navLogo"
              alt=""
            />
          </div>
        </div>
      </div>

      <div
        :class="navItemClass('wallet')"
        class="tab"
        @click="$emit('navigate', 'wallet')"
      >
        <div class="tab__icon">
          <img
            v-if="isBoursecu"
            :src="boursecuWalletIcon"
            alt=""
            class="tab__icon-image"
          />
          <Icon v-else icon="vuesax-linear:wallet-1" size="24" />
        </div>
        <div class="text-xs mt-1 font-bold">کیف پول</div>
      </div>
      <div
        :class="navItemClass(userNavItem.routeName)"
        class="tab"
        @click="$emit('navigate', userNavItem.routeName)"
      >
        <div class="tab__icon">
          <img
            v-if="isBoursecu && userNavItem.routeName === 'user'"
            :src="boursecuSettingsIcon"
            alt=""
            class="tab__icon-image"
          />
          <Icon v-else :icon="userNavItem.icon" size="24" />
        </div>
        <div class="text-xs mt-1 font-bold">{{ userNavItem.label }}</div>
      </div>
    </div>

    <div v-if="!isBoursecu" class="main">
      <div class="circle" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import Icon from '@/components/BasicPacks/BasicIcon.vue'
import { getBoursecuActionIconSrc, getConfigApp } from '@/utils/config'

defineProps<{
  isBoursecu: boolean
  navLogo: string
  navItemClass: (routeName: string) => string
}>()

defineEmits<{
  navigate: [routeName: string]
}>()

const projectName = getConfigApp('name')
const userNavItem = computed(() =>
  projectName === 'abshodehrahimi'
    ? { routeName: 'notifyTrigger', label: 'هشدار قیمت', icon: 'vuesax-linear:bill' }
    : { routeName: 'user', label: 'تنظیمات', icon: 'vuesax-linear:setting-2' },
)
const boursecuBuySellIcon = getBoursecuActionIconSrc('buySell') ?? ''
const boursecuTransactionsIcon = getBoursecuActionIconSrc('transactions') ?? ''
const boursecuWalletIcon = getBoursecuActionIconSrc('wallet') ?? ''
const boursecuHomeIcon = getBoursecuActionIconSrc('home') ?? ''
const boursecuSettingsIcon = getBoursecuActionIconSrc('settings') ?? ''
const whiteNavLogoProjects = ['goldenramin']
const isWhiteNavLogo = computed(() => whiteNavLogoProjects.includes(projectName))
</script>

<style scoped>
.tab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  overflow: visible;
}

.tab__icon-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(2.25);
}
</style>