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

add: transactions page and sidemenu active link style

Browse Source
This commit is contained in:
Mahyar Khanbolooki
2025-07-19 14:06:47 +03:30
parent 43f905ac14
commit 6ed1f3f463
2 changed files with 126 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/menu/SideMenu.tsx
+37 -17
View File
@@ -19,7 +19,8 @@ import ExitIcon from '../icons/ExitIcon';
import NightModeSwitch from '../button/NightModeSwitch';
import Button from '../button/PrimaryButton';
import { useAuthStore } from '@/zustand/authStore';
import { useRouter } from 'next/navigation';
import { useParams, usePathname, useRouter } from 'next/navigation';
import clsx from 'clsx';
type MenuItemType = {
href: string | undefined;
@@ -31,40 +32,40 @@ type MenuItemType = {
const menuItems: Array<Array<MenuItemType>> = [
[
{
href: '/', title: 'صفحه اصلی', icon: <NotificationBellIcon width={20} height={20} className='text-icon-deactive' />
href: '/', title: 'اعلان ها', icon: <NotificationBellIcon width={20} height={20} />
},
{
href: 'my-services', title: 'سرویس های من', icon: <CupIcon width={20} height={20} className='text-icon-deactive' />
href: 'my-services', title: 'باشگاه مشتریان', icon: <CupIcon width={20} height={20} />
},
{
href: 'services', title: 'سایر سرویس ها', icon: <TicketDiscountIcon width={20} height={20} className='text-icon-deactive' />
href: 'services', title: 'کد های تخفیف', icon: <TicketDiscountIcon width={20} height={20} />
},
{
href: 'invoices', title: 'لیست', icon: <CalendarSearchIcon width={20} height={20} className='text-icon-deactive' />
href: 'orders', title: 'لیست سفارشات', icon: <CalendarSearchIcon width={20} height={20} />
},
{
href: 'transactions', title: 'تراکنش ها', icon: <ReceiptIcon width={20} height={20} className='text-icon-deactive' />
href: 'transactions', title: 'لیست تراکنش ها', icon: <ReceiptIcon width={20} height={20} />
},
{
href: '/', title: 'صفحه اصلی', icon: <GameControllerIcon width={20} height={20} className='text-icon-deactive' />
href: '/', title: 'بازی و سرگرمی ها', icon: <GameControllerIcon width={20} height={20} />
},
{
href: 'my-services', title: 'سرویس های من', icon: <ThumbsUpIcon width={20} height={20} className='text-icon-deactive' />
href: 'my-services', title: 'معرفی به دوستان', icon: <ThumbsUpIcon width={20} height={20} />
},
{
href: 'services', title: 'سایر سرویس ها', icon: <NoteBoardIcon width={20} height={20} className='text-icon-deactive' />
href: 'services', title: 'گزارش اشکال', icon: <NoteBoardIcon width={20} height={20} />
},
{
href: 'invoices', title: 'نصب اپلیکیشن', icon: <DirectboxReceiveIcon width={20} height={20} className='text-icon-deactive' />
href: 'invoices', title: 'نصب اپلیکیشن', icon: <DirectboxReceiveIcon width={20} height={20} />
},
],
[],
[
{
auth: true, href: undefined, title: 'تنظیمات', icon: <SettingIcon width={20} height={20} className='text-icon-deactive' />
auth: true, href: undefined, title: 'تنظیمات', icon: <SettingIcon width={20} height={20} />
},
{
auth: true, href: '?logout', title: 'خروج', icon: <ExitIcon width={20} height={20} className='text-icon-deactive' />
auth: true, href: '?logout', title: 'خروج', icon: <ExitIcon width={20} height={20} />
},
]
]
@@ -83,6 +84,9 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
const userIsAuthenticated = true; //useAuthStore((state) => state.isAuthenticated);
const authLogout = useAuthStore((state) => state.logout);
const router = useRouter();
const params = useParams();
const { name } = params;
const pathname = usePathname();
const variants: Variants = {
hidden: {
@@ -149,9 +153,25 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
<li>
<div className='flex flex-col gap-[60px]'>
<div className='flex flex-col gap-[23px]'>
<div className='pt-2 text-start px-12 text-menu-header'>منو</div>
<div className='pt-2 text-start text-sm px-12 text-menu-header'>منو</div>
{menuItems[0].filter((x) => x.auth ? userIsAuthenticated && x : x).map((v, i) => {
return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
const isActive = pathname === `/${name}/${v.href}`
return <SideMenuItem
className={clsx(
isActive && 'text-foreground!'
)}
key={i}
href={(v.href ?? '')}
title={v.title}
icon={
<div className={clsx(
isActive ? 'text-foreground!' : 'text-icon-deactive'
)}
>
{v.icon}
</div>
}
/>
})}
</div>
</div>
@@ -163,7 +183,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
href={v.href || ''}
onClick={v.href && hrefOnClicks.find((i) => i.href === v.href)?.handler || undefined}
title={v.title}
icon={v.icon}
icon={<div className='text-icon-deactive'>{v.icon}</div>}
/>
})}
<SideMenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /></SideMenuItem>
@@ -174,8 +194,8 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
</BlurredOverlayContainer>
</div>
<BlurredOverlayContainer visible={logoutModalVisible} onClick={toggleLogoutModalVisiblity} inDuration={100} outDuration={100} outDelay={75}>
<div
className='absolute top-1/2 left-0 w-full px-6' onClick={toggleLogoutModalVisiblity}>
<div
className='absolute top-1/2 left-0 w-full px-6' onClick={toggleLogoutModalVisiblity}>
<motion.div
animate={{ y: logoutModalVisible ? [10, 0] : [0, 10], }}
transition={{ duration: 0.1, ease: 'easeInOut' }}