boursecu_user/src/layouts/mobile/MobileBottomNav.vue

<template>
  <div class="bottom-appbar w-auto mx-auto bg-white">
    <div class="tabs bottom-0">
      <div
        :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
        :class="navItemClass('transactions')"
        class="tab"
        @click="$emit('navigate', 'transactions')"
      >
        <div class="tab__icon">
          <img
            :src="boursecuTransactionsIcon"
            alt=""
            class="tab__icon-image"
          />
        </div>
        <div class="text-xs mt-1 font-bold">تراکنش ها</div>
      </div>

      <div
        :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
        :class="navItemClass('wallet')"
        class="tab"
        @click="$emit('navigate', 'wallet')"
      >
        <div class="tab__icon">
          <img
            :src="boursecuWalletIcon"
            alt=""
            class="tab__icon-image"
          />
        </div>
        <div class="text-xs mt-1 font-bold">کیف پول</div>
      </div>

      <div
        :class="navItemClass('user')"
        class="tab"
        @click="$emit('navigate', 'user')"
      >
        <div class="tab__icon">
          <img
            :src="boursecuSettingsIcon"
            alt=""
            class="tab__icon-image"
          />
        </div>
        <div class="text-xs mt-1 font-bold">امکانات بیشتر</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getBoursecuActionIconSrc } from '@/utils/config'

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

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

const boursecuBuySellIcon = getBoursecuActionIconSrc('buySell') ?? ''
const boursecuTransactionsIcon = getBoursecuActionIconSrc('transactions') ?? ''
const boursecuWalletIcon = getBoursecuActionIconSrc('wallet') ?? ''
const boursecuHomeIcon = getBoursecuActionIconSrc('home') ?? ''
const boursecuSettingsIcon = getBoursecuActionIconSrc('settings') ?? ''
</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>