diff --git a/src/assets/img/boursecu-assets-icon.png b/src/assets/img/boursecu-assets-icon.png new file mode 100644 index 0000000..c4b9eba Binary files /dev/null and b/src/assets/img/boursecu-assets-icon.png differ diff --git a/src/assets/img/boursecu-buy-sell-icon.png b/src/assets/img/boursecu-buy-sell-icon.png new file mode 100644 index 0000000..403085f Binary files /dev/null and b/src/assets/img/boursecu-buy-sell-icon.png differ diff --git a/src/assets/img/boursecu-convert-icon.png b/src/assets/img/boursecu-convert-icon.png new file mode 100644 index 0000000..65745b3 Binary files /dev/null and b/src/assets/img/boursecu-convert-icon.png differ diff --git a/src/assets/img/boursecu-physical-receive-icon.png b/src/assets/img/boursecu-physical-receive-icon.png new file mode 100644 index 0000000..510f96e Binary files /dev/null and b/src/assets/img/boursecu-physical-receive-icon.png differ diff --git a/src/assets/img/boursecu-transactions-icon.png b/src/assets/img/boursecu-transactions-icon.png new file mode 100644 index 0000000..b48b881 Binary files /dev/null and b/src/assets/img/boursecu-transactions-icon.png differ diff --git a/src/assets/img/boursecu-wallet-icon.png b/src/assets/img/boursecu-wallet-icon.png new file mode 100644 index 0000000..29ecfc3 Binary files /dev/null and b/src/assets/img/boursecu-wallet-icon.png differ diff --git a/src/layouts/config/navigation.ts b/src/layouts/config/navigation.ts index 5186129..c1d1482 100644 --- a/src/layouts/config/navigation.ts +++ b/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' }, ] diff --git a/src/layouts/desktop/DesktopNavItem.vue b/src/layouts/desktop/DesktopNavItem.vue index 729ad61..05663ce 100644 --- a/src/layouts/desktop/DesktopNavItem.vue +++ b/src/layouts/desktop/DesktopNavItem.vue @@ -5,7 +5,15 @@ :class="{ 'desktop-nav-item--active': active }" @click="$emit('click')" > - + + + + {{ label }} @@ -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: [] }>() + + diff --git a/src/layouts/desktop/DesktopSidebar.vue b/src/layouts/desktop/DesktopSidebar.vue index caf48a5..605fcd5 100644 --- a/src/layouts/desktop/DesktopSidebar.vue +++ b/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)" diff --git a/src/layouts/desktop/desktop-layout.less b/src/layouts/desktop/desktop-layout.less index 6bc3387..e49d6cb 100644 --- a/src/layouts/desktop/desktop-layout.less +++ b/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; diff --git a/src/layouts/mobile/MobileBottomNav.vue b/src/layouts/mobile/MobileBottomNav.vue index 24b4e16..e0dc5aa 100644 --- a/src/layouts/mobile/MobileBottomNav.vue +++ b/src/layouts/mobile/MobileBottomNav.vue @@ -7,7 +7,13 @@ class="tab" @click="$emit('navigate', 'buyProduct')" > - +
+ +
سفارش ها
- +
+ +
صفحه اصلی
@@ -25,7 +33,15 @@ class="tab" @click="$emit('navigate', 'transactions')" > - +
+ + +
{{ isBoursecu ? 'تراکنش ها' : 'گزارش' }}
@@ -35,7 +51,9 @@ class="tab" @click="$emit('navigate', 'home')" > - +
+ +
صفحه اصلی
@@ -66,7 +84,15 @@ class="tab" @click="$emit('navigate', 'wallet')" > - +
+ + +
کیف پول
- +
+ +
تنظیمات
@@ -88,7 +116,7 @@ + + diff --git a/src/layouts/types.ts b/src/layouts/types.ts index 0a9d464..01e9e41 100644 --- a/src/layouts/types.ts +++ b/src/layouts/types.ts @@ -3,4 +3,5 @@ export interface AppNavItem { routeName: string label: string icon: string + iconSrc?: string } diff --git a/src/utils/config.ts b/src/utils/config.ts index 12c8147..ad08ef6 100644 --- a/src/utils/config.ts +++ b/src/utils/config.ts @@ -1,6 +1,12 @@ import boursecuLogo from '@/assets/img/boursemes_logofull.png' import boursecuSplashLogo from '@/assets/img/boursemes-splash.png' import boursecuLoginLogo from '@/assets/img/boursemes-login.png' +import boursecuTransactionsIcon from '@/assets/img/boursecu-transactions-icon.png' +import boursecuPhysicalReceiveIcon from '@/assets/img/boursecu-physical-receive-icon.png' +import boursecuConvertIcon from '@/assets/img/boursecu-convert-icon.png' +import boursecuWalletIcon from '@/assets/img/boursecu-wallet-icon.png' +import boursecuBuySellIcon from '@/assets/img/boursecu-buy-sell-icon.png' +import boursecuAssetsIcon from '@/assets/img/boursecu-assets-icon.png' import bazretalaLoginLogo from '@/assets/img/bazretala-login-logo.png' import bazretalaNavLogo from '@/assets/img/bazretala-nav-logo.png' import bazretalaFundBg from '@/assets/img/bazretala-fund-bg.png' @@ -23,6 +29,43 @@ export function isBazretalaProject() { return getConfigApp('name') === 'bazretala' } +export function getBoursecuTransactionsIcon() { + return boursecuTransactionsIcon +} + +export function getBoursecuPhysicalReceiveIcon() { + return boursecuPhysicalReceiveIcon +} + +export function getBoursecuConvertIcon() { + return boursecuConvertIcon +} + +export function getBoursecuWalletIcon() { + return boursecuWalletIcon +} + +export function getBoursecuBuySellIcon() { + return boursecuBuySellIcon +} + +export function getBoursecuAssetsIcon() { + return boursecuAssetsIcon +} + +export function getBoursecuActionIconSrc(actionId: string): string | undefined { + const icons: Record = { + buySell: boursecuBuySellIcon, + wallet: boursecuWalletIcon, + assets: boursecuAssetsIcon, + transactions: boursecuTransactionsIcon, + physicalReceive: boursecuPhysicalReceiveIcon, + convert: boursecuConvertIcon, + } + + return icons[actionId] +} + export function hasCustomLoginLogoLayout() { return isBoursecuProject() || isBazretalaProject() } diff --git a/src/views/base/home/components/HomeQuickActionBox.vue b/src/views/base/home/components/HomeQuickActionBox.vue index 033042a..66fe98b 100644 --- a/src/views/base/home/components/HomeQuickActionBox.vue +++ b/src/views/base/home/components/HomeQuickActionBox.vue @@ -17,12 +17,18 @@ const isBoursecu = isBoursecuProject()