chang icons of boursemes

Co-authored-by: Cursor <cursoragent@cursor.com>

src/layouts/config/navigation.ts

@@ -1,11 +1,33 @@
-import { isBoursecuProject } from '@/utils/config'
+import {
+  getBoursecuActionIconSrc,
+  getBoursecuTransactionsIcon,
+  isBoursecuProject,
+} from '@/utils/config'
 import type { AppNavItem } from '../types'
 
 const BOURSECU_PRIMARY_NAV: AppNavItem[] = [
-  { id: 'buyProduct', routeName: 'buyProduct', label: 'سفارش‌ها', icon: 'vuesax-linear:box' },
-  { id: 'transactions', routeName: 'transactions', label: 'تراکنش‌ها', icon: 'vuesax-linear:receipt-item' },
+  {
+    id: 'buyProduct',
+    routeName: 'buyProduct',
+    label: 'سفارش‌ها',
+    icon: 'vuesax-linear:box',
+    iconSrc: getBoursecuActionIconSrc('buySell'),
+  },
+  {
+    id: 'transactions',
+    routeName: 'transactions',
+    label: 'تراکنش‌ها',
+    icon: 'vuesax-linear:receipt-item',
+    iconSrc: getBoursecuTransactionsIcon(),
+  },
   { id: 'home', routeName: 'home', label: 'صفحه اصلی', icon: 'vuesax-linear:home' },
-  { id: 'wallet', routeName: 'wallet', label: 'کیف پول', icon: 'vuesax-linear:wallet-1' },
+  {
+    id: 'wallet',
+    routeName: 'wallet',
+    label: 'کیف پول',
+    icon: 'vuesax-linear:wallet-1',
+    iconSrc: getBoursecuActionIconSrc('wallet'),
+  },
   { id: 'user', routeName: 'user', label: 'تنظیمات', icon: 'vuesax-linear:setting-2' },
 ]
 

src/layouts/desktop/DesktopNavItem.vue

@@ -5,7 +5,15 @@
     :class="{ 'desktop-nav-item--active': active }"
     @click="$emit('click')"
   >
-    <BasicIcon :icon="icon" size="20" class="desktop-nav-item__icon" />
+    <span class="desktop-nav-item__icon-wrap">
+      <img
+        v-if="iconSrc"
+        :src="iconSrc"
+        alt=""
+        class="desktop-nav-item__icon desktop-nav-item__icon--image"
+      />
+      <BasicIcon v-else :icon="icon" size="20" class="desktop-nav-item__icon" />
+    </span>
     <span class="desktop-nav-item__label">{{ label }}</span>
   </button>
 </template>
@@ -15,6 +23,7 @@ import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 
 defineProps<{
   icon: string
+  iconSrc?: string
   label: string
   active: boolean
 }>()
@@ -23,3 +32,12 @@ defineEmits<{
   click: []
 }>()
 </script>
+
+<style scoped>
+.desktop-nav-item__icon--image {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  transform: scale(1.75);
+}
+</style>

src/layouts/desktop/DesktopSidebar.vue

@@ -16,6 +16,7 @@
         v-for="item in primaryItems"
         :key="item.id"
         :icon="item.icon"
+        :icon-src="item.iconSrc"
         :label="item.label"
         :active="isNavActive(item.routeName)"
         @click="navigateTo(item.routeName)"
@@ -29,6 +30,7 @@
         v-for="item in secondaryItems"
         :key="item.id"
         :icon="item.icon"
+        :icon-src="item.iconSrc"
         :label="item.label"
         :active="isNavActive(item.routeName)"
         @click="navigateTo(item.routeName)"

src/layouts/desktop/desktop-layout.less

@@ -61,13 +61,25 @@
       color: #fff;
 
       .desktop-nav-item__icon {
-        color: #fff;
+        color: #133050;
       }
     }
   }
 
+  .desktop-nav-item__icon-wrap {
+    background: rgba(255, 255, 255, 0.92);
+  }
+
   .desktop-nav-item__icon {
-    color: rgba(255, 255, 255, 0.85);
+    color: #133050;
+  }
+
+  .desktop-nav-item {
+    &:hover {
+      .desktop-nav-item__icon {
+        color: #133050;
+      }
+    }
   }
 
   .desktop-sidebar__logo {
@@ -153,6 +165,17 @@
   color: #9ca3af;
 }
 
+.desktop-nav-item__icon-wrap {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background: transparent;
+  flex-shrink: 0;
+}
+
 .desktop-nav-item__label {
   flex: 1;
   line-height: 1.3;

src/layouts/mobile/MobileBottomNav.vue

@@ -7,7 +7,13 @@
         class="tab"
         @click="$emit('navigate', 'buyProduct')"
       >
-        <Icon icon="vuesax-linear:box" />
+        <div class="tab__icon">
+          <img
+            :src="boursecuBuySellIcon"
+            alt=""
+            class="tab__icon-image"
+          />
+        </div>
         <div class="text-xs mt-1 font-bold">سفارش ها</div>
       </div>
       <div
@@ -16,7 +22,9 @@
         class="tab"
         @click="$emit('navigate', 'home')"
       >
-        <Icon icon="vuesax-linear:home" />
+        <div class="tab__icon">
+          <Icon icon="vuesax-linear:home" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
       </div>
 
@@ -25,7 +33,15 @@
         class="tab"
         @click="$emit('navigate', 'transactions')"
       >
-        <Icon icon="vuesax-linear:receipt-item" />
+        <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">{{ isBoursecu ? 'تراکنش ها' : 'گزارش' }}</div>
       </div>
 
@@ -35,7 +51,9 @@
         class="tab"
         @click="$emit('navigate', 'home')"
       >
-        <Icon icon="vuesax-linear:home" />
+        <div class="tab__icon">
+          <Icon icon="vuesax-linear:home" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
       </div>
       <div v-else class="main_in" @click="$emit('navigate', 'buyProduct')">
@@ -66,7 +84,15 @@
         class="tab"
         @click="$emit('navigate', 'wallet')"
       >
-        <Icon icon="vuesax-linear:wallet-1" />
+        <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
@@ -74,7 +100,9 @@
         class="tab"
         @click="$emit('navigate', 'user')"
       >
-        <Icon icon="vuesax-linear:setting-2" />
+        <div class="tab__icon">
+          <Icon icon="vuesax-linear:setting-2" size="24" />
+        </div>
         <div class="text-xs mt-1 font-bold">تنظیمات</div>
       </div>
     </div>
@@ -88,7 +116,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import { getConfigApp } from '@/utils/config'
+import { getBoursecuActionIconSrc, getConfigApp } from '@/utils/config'
 
 defineProps<{
   isBoursecu: boolean
@@ -102,6 +130,28 @@ defineEmits<{
 }>()
 
 const projectName = getConfigApp('name')
+const boursecuBuySellIcon = getBoursecuActionIconSrc('buySell') ?? ''
+const boursecuTransactionsIcon = getBoursecuActionIconSrc('transactions') ?? ''
+const boursecuWalletIcon = getBoursecuActionIconSrc('wallet') ?? ''
 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>

src/layouts/types.ts

@@ -3,4 +3,5 @@ export interface AppNavItem {
   routeName: string
   label: string
   icon: string
+  iconSrc?: string
 }