From 21ba415a4e29b14d3d8db8aeb85177a8157c7f3f Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Sun, 10 Aug 2025 14:54:05 +0330
Subject: [PATCH] fix: side menu items style

---
 src/components/menu/SideMenu.tsx | 62 ++++++++++++++++----------------
 1 file changed, 30 insertions(+), 32 deletions(-)

diff --git a/src/components/menu/SideMenu.tsx b/src/components/menu/SideMenu.tsx
index 27f5c02..1e51811 100644
--- a/src/components/menu/SideMenu.tsx
+++ b/src/components/menu/SideMenu.tsx
@@ -3,17 +3,7 @@
 import React, { useMemo, useRef, useState } from 'react';
 import { motion, PanInfo, Variants } from 'framer-motion';
 import SideMenuItem from './SideMenuItem';
-import NotificationBellIcon from '../icons/NotificationBellIcon';
-import CupIcon from '../icons/CupIcon';
-import TicketDiscountIcon from '../icons/TickerDiscountIcon';
-import CalendarSearchIcon from '../icons/CalendarSearchIcon';
-import ReceiptIcon from '../icons/ReceiptIcon';
-import GameControllerIcon from '../icons/GameControllerIcon';
-import ThumbsUpIcon from '../icons/ThumbsUpIcon';
 import NoteBoardIcon from '../icons/NoteBoardIcon';
-import DirectboxReceiveIcon from '../icons/DirectboxReceiveIcon';
-import SettingIcon from '../icons/SettingsIcon';
-import ExitIcon from '../icons/ExitIcon';
 import BlurredOverlayContainer from '../overlays/BlurredOverlayContainer';
 import NightModeSwitch from '../button/NightModeSwitch';
 import Button from '../button/PrimaryButton';
@@ -21,32 +11,32 @@ import { useAuthStore } from '@/zustand/authStore';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { DocumentCopy, Instagram, Share, Whatsapp } from 'iconsax-react';
+import { CalendarSearch, Cup, DirectboxReceive, DocumentCopy, Game, Icon, Instagram, Like1, LogoutCurve, Notification, Receipt1, Setting2, Share, TicketDiscount, Whatsapp } from 'iconsax-react';
 import TelegramIcon from '../icons/TelegramIcon';
 
 type MenuItemType = {
     href: string | undefined;
     title: string;
-    icon: React.ReactElement;
+    icon: Icon;
     auth?: boolean;
 };
 
 const menuItems: Array<Array<MenuItemType>> = [
     [
-        { href: '/', title: 'Notifications', icon: <NotificationBellIcon width={20} height={20} /> },
-        { href: 'my-services', title: 'CustomerClub', icon: <CupIcon width={20} height={20} /> },
-        { href: 'services', title: 'Discounts', icon: <TicketDiscountIcon width={20} height={20} /> },
-        { href: 'order/history', title: 'Orders', icon: <CalendarSearchIcon width={20} height={20} /> },
-        { href: 'transactions', title: 'Transactions', icon: <ReceiptIcon width={20} height={20} /> },
-        { href: '/', title: 'Games', icon: <GameControllerIcon width={20} height={20} /> },
-        { href: '?share', title: 'ShareWithFriends', icon: <ThumbsUpIcon width={20} height={20} /> },
-        { href: 'report', title: 'ReportProblem', icon: <NoteBoardIcon width={20} height={20} /> },
-        { href: 'invoices', title: 'InstallApp', icon: <DirectboxReceiveIcon width={20} height={20} /> }
+        { href: '/', title: 'Notifications', icon: Notification },
+        { href: 'my-services', title: 'CustomerClub', icon: Cup },
+        { href: 'services', title: 'Discounts', icon: TicketDiscount },
+        { href: 'order/history', title: 'Orders', icon: CalendarSearch },
+        { href: 'transactions', title: 'Transactions', icon: Receipt1 },
+        { href: '/', title: 'Games', icon: Game },
+        { href: '?share', title: 'ShareWithFriends', icon: Like1 },
+        { href: 'report', title: 'ReportProblem', icon: NoteBoardIcon },
+        { href: 'invoices', title: 'InstallApp', icon: DirectboxReceive }
     ],
     [],
     [
-        { auth: true, href: undefined, title: 'Preferences', icon: <SettingIcon width={20} height={20} /> },
-        { auth: true, href: '?logout', title: 'Logout', icon: <ExitIcon width={20} height={20} /> }
+        { auth: true, href: undefined, title: 'Preferences', icon: Setting2 },
+        { auth: true, href: '?logout', title: 'Logout', icon: LogoutCurve }
     ]
 ];
 
@@ -126,7 +116,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                         <ul>
                             {menuItems[0]
                                 .filter(item => !item.auth || (item.auth && userIsAuthenticated))
-                                .map((item, index) => {
+                                .map(({ icon: Icon, ...item }, index) => {
                                     const href = `/${name}/${item.href}`;
                                     const isActive = pathname === href;
                                     return (
@@ -141,9 +131,12 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                                         : undefined
                                                 }
                                                 icon={
-                                                    <span className={clsx(isActive ? 'text-foreground!' : 'text-icon-deactive')}>
-                                                        {item.icon}
-                                                    </span>
+                                                    <Icon
+                                                        variant={isActive ? 'Bold' : 'Linear'}
+                                                        className={clsx(
+                                                            isActive ? 'text-foreground fill-foreground ' : 'stroke-icon-deactive text-icon-deactive'
+                                                        )}
+                                                        size={20} width={20} height={20} />
                                                 }
                                             />
                                         </li>
@@ -157,7 +150,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                     <ul className="flex flex-col pt-16">
                         {menuItems[2]
                             .filter(item => !item.auth || (item.auth && userIsAuthenticated))
-                            .map((item, index) => {
+                            .map(({ icon: Icon, ...item }, index) => {
                                 const href = `/${name}/${item.href}`;
                                 const isActive = pathname === href;
                                 return (
@@ -173,10 +166,15 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                                             }
                                             title={tMenu(item.title)}
                                             icon={
-                                                <span className={clsx(isActive ? 'text-foreground!' : 'text-icon-deactive')}>
-                                                    {item.icon}
-                                                </span>
-                                            } />
+                                                <Icon
+                                                    variant={isActive ? 'Bold' : 'Linear'}
+                                                    className={clsx(
+                                                        isActive ? 'text-foreground fill-foreground ' : 'stroke-icon-deactive text-icon-deactive'
+                                                    )}
+                                                    size={20} width={20} height={20} />
+
+                                            }
+                                        />
                                     </li>
                                 )
                             })}