danak/dmenu-plus-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: side menu items style

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-08-10 14:54:05 +03:30
parent d65d7f1cc8
commit 21ba415a4e
1 changed files with 30 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/menu/SideMenu.tsx
+30 -32
View File
@@ -3,17 +3,7 @@
import React, { useMemo, useRef, useState } from 'react'; import React, { useMemo, useRef, useState } from 'react';
import { motion, PanInfo, Variants } from 'framer-motion'; import { motion, PanInfo, Variants } from 'framer-motion';
import SideMenuItem from './SideMenuItem'; 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 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 BlurredOverlayContainer from '../overlays/BlurredOverlayContainer';
import NightModeSwitch from '../button/NightModeSwitch'; import NightModeSwitch from '../button/NightModeSwitch';
import Button from '../button/PrimaryButton'; import Button from '../button/PrimaryButton';
@@ -21,32 +11,32 @@ import { useAuthStore } from '@/zustand/authStore';
import { useParams, usePathname, useRouter } from 'next/navigation'; import { useParams, usePathname, useRouter } from 'next/navigation';
import clsx from 'clsx'; import clsx from 'clsx';
import { useTranslation } from 'react-i18next'; 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'; import TelegramIcon from '../icons/TelegramIcon';
type MenuItemType = { type MenuItemType = {
href: string | undefined; href: string | undefined;
title: string; title: string;
icon: React.ReactElement; icon: Icon;
auth?: boolean; auth?: boolean;
}; };
const menuItems: Array<Array<MenuItemType>> = [ const menuItems: Array<Array<MenuItemType>> = [
[ [
{ href: '/', title: 'Notifications', icon: <NotificationBellIcon width={20} height={20} /> }, { href: '/', title: 'Notifications', icon: Notification },
{ href: 'my-services', title: 'CustomerClub', icon: <CupIcon width={20} height={20} /> }, { href: 'my-services', title: 'CustomerClub', icon: Cup },
{ href: 'services', title: 'Discounts', icon: <TicketDiscountIcon width={20} height={20} /> }, { href: 'services', title: 'Discounts', icon: TicketDiscount },
{ href: 'order/history', title: 'Orders', icon: <CalendarSearchIcon width={20} height={20} /> }, { href: 'order/history', title: 'Orders', icon: CalendarSearch },
{ href: 'transactions', title: 'Transactions', icon: <ReceiptIcon width={20} height={20} /> }, { href: 'transactions', title: 'Transactions', icon: Receipt1 },
{ href: '/', title: 'Games', icon: <GameControllerIcon width={20} height={20} /> }, { href: '/', title: 'Games', icon: Game },
{ href: '?share', title: 'ShareWithFriends', icon: <ThumbsUpIcon width={20} height={20} /> }, { href: '?share', title: 'ShareWithFriends', icon: Like1 },
{ href: 'report', title: 'ReportProblem', icon: <NoteBoardIcon width={20} height={20} /> }, { href: 'report', title: 'ReportProblem', icon: NoteBoardIcon },
{ href: 'invoices', title: 'InstallApp', icon: <DirectboxReceiveIcon width={20} height={20} /> } { href: 'invoices', title: 'InstallApp', icon: DirectboxReceive }
], ],
[], [],
[ [
{ auth: true, href: undefined, title: 'Preferences', icon: <SettingIcon width={20} height={20} /> }, { auth: true, href: undefined, title: 'Preferences', icon: Setting2 },
{ auth: true, href: '?logout', title: 'Logout', icon: <ExitIcon width={20} height={20} /> } { auth: true, href: '?logout', title: 'Logout', icon: LogoutCurve }
] ]
]; ];
@@ -126,7 +116,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
<ul> <ul>
{menuItems[0] {menuItems[0]
.filter(item => !item.auth || (item.auth && userIsAuthenticated)) .filter(item => !item.auth || (item.auth && userIsAuthenticated))
.map((item, index) => { .map(({ icon: Icon, ...item }, index) => {
const href = `/${name}/${item.href}`; const href = `/${name}/${item.href}`;
const isActive = pathname === href; const isActive = pathname === href;
return ( return (
@@ -141,9 +131,12 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
: undefined : undefined
} }
icon={ icon={
<span className={clsx(isActive ? 'text-foreground!' : 'text-icon-deactive')}> <Icon
{item.icon} variant={isActive ? 'Bold' : 'Linear'}
</span> className={clsx(
isActive ? 'text-foreground fill-foreground ' : 'stroke-icon-deactive text-icon-deactive'
)}
size={20} width={20} height={20} />
} }
/> />
</li> </li>
@@ -157,7 +150,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
<ul className="flex flex-col pt-16"> <ul className="flex flex-col pt-16">
{menuItems[2] {menuItems[2]
.filter(item => !item.auth || (item.auth && userIsAuthenticated)) .filter(item => !item.auth || (item.auth && userIsAuthenticated))
.map((item, index) => { .map(({ icon: Icon, ...item }, index) => {
const href = `/${name}/${item.href}`; const href = `/${name}/${item.href}`;
const isActive = pathname === href; const isActive = pathname === href;
return ( return (
@@ -173,10 +166,15 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
} }
title={tMenu(item.title)} title={tMenu(item.title)}
icon={ icon={
<span className={clsx(isActive ? 'text-foreground!' : 'text-icon-deactive')}> <Icon
{item.icon} variant={isActive ? 'Bold' : 'Linear'}
</span> className={clsx(
} /> isActive ? 'text-foreground fill-foreground ' : 'stroke-icon-deactive text-icon-deactive'
)}
size={20} width={20} height={20} />
}
/>
</li> </li>
) )
})} })}