add: transactions page and sidemenu active link style

src/app/[name]/transactions/page.tsx

@@ -0,0 +1,89 @@
+import { Button } from '@/components/ui/button'
+import React from 'react'
+
+function TransactionsIndex() {
+    return (
+        <div>
+            <div className='font-medium'>کدهای تخفیف</div>
+
+            <div className='mt-3 bg-container rounded-normal grid grid-cols-4 items-center'>
+
+                <div className='col-span-3 py-9.5 pe-7 ps-5'>
+                    <div className='font-bold'>کدهای تخفیف شما</div>
+                    <p className='text-xs mt-[7px]'>کد تخفیف مورد نظر را کپی کنید و در بخش پرداخت ها استفاده کنید</p>
+                </div>
+
+                <div
+                    style={{ background: 'linear-gradient(165.51deg, #000000 -8.44%, #C3C7DD 100%)' }}
+                    className='col-span-1 h-full text-end py-4 px-5.5 flex flex-col justify-between rounded-e-normal'>
+                    <p className='text-sm2 text-white'>
+                        <span className='font-medium'>Your</span>
+                        <br />
+                        <span className='font-bold'>Coupon</span>
+                    </p>
+
+                    <svg className='w-full' height="20" viewBox="0 0 72 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M4.0033 0H0.845703V20H4.0033V0Z" fill="white" />
+                        <path d="M9.266 0H6.1084V20H9.266V0Z" fill="white" />
+                        <path d="M12.4236 0H11.3711V20H12.4236V0Z" fill="white" />
+                        <path d="M16.6344 0H14.5293V20H16.6344V0Z" fill="white" />
+                        <path d="M19.7916 0H17.6865V20H19.7916V0Z" fill="white" />
+                        <path d="M24.0018 0H22.9492V20H24.0018V0Z" fill="white" />
+                        <path d="M28.2113 0H25.0537V20H28.2113V0Z" fill="white" />
+                        <path d="M30.3182 0H29.2656V20H30.3182V0Z" fill="white" />
+                        <path d="M33.4744 0H32.4219V20H33.4744V0Z" fill="white" />
+                        <path d="M36.6324 0H34.5273V20H36.6324V0Z" fill="white" />
+                        <path d="M42.9478 0H40.8428V20H42.9478V0Z" fill="white" />
+                        <path d="M47.1576 0H44V20H47.1576V0Z" fill="white" />
+                        <path d="M49.2625 0H48.21V20H49.2625V0Z" fill="white" />
+                        <path d="M55.5785 0H52.4209V20H55.5785V0Z" fill="white" />
+                        <path d="M57.6824 0H56.6299V20H57.6824V0Z" fill="white" />
+                        <path d="M62.9455 0H58.7354V20H62.9455V0Z" fill="white" />
+                        <path d="M66.1031 0H63.998V20H66.1031V0Z" fill="white" />
+                        <path d="M71.3666 0H68.209V20H71.3666V0Z" fill="white" />
+                    </svg>
+                </div>
+
+            </div>
+
+            <div className='mt-6 bg-container rounded-normal flex justify-between items-center'>
+                <div className='col-span-3 py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
+                    <div className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</div>
+                    <p className='text-xs mt-[7px]'>قابل استفاده برای همه ی منو ها و محصولات</p>
+                    <Button className='font-light! w-fit! px-10 py-1.5 mt-4 text-xs rounded-lg'>کپی کد</Button>
+                </div>
+                <div>
+                    <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium'>
+                        F12BB587
+                    </p>
+                </div>
+            </div>
+            <div className='mt-6 bg-container rounded-normal flex justify-between items-center'>
+                <div className='col-span-3 py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
+                    <div className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</div>
+                    <p className='text-xs mt-[7px]'>قابل استفاده برای همه ی منو ها و محصولات</p>
+                    <Button className='font-light! w-fit! px-10 py-1.5 mt-4 text-xs rounded-lg'>کپی کد</Button>
+                </div>
+                <div>
+                    <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium'>
+                        F12BB587
+                    </p>
+                </div>
+            </div>
+            <div className='mt-6 bg-container rounded-normal flex justify-between items-center'>
+                <div className='col-span-3 py-4 pe-7 ps-5 border-e-2 w-full border-border border-dashed'>
+                    <div className='font-bold text-sm2'>مبلغ تخفیف: 50,000 تومان</div>
+                    <p className='text-xs mt-[7px]'>قابل استفاده برای همه ی منو ها و محصولات</p>
+                    <Button className='font-light! w-fit! px-10 py-1.5 mt-4 text-xs rounded-lg'>کپی کد</Button>
+                </div>
+                <div>
+                    <p className='text-sm2 transform -rotate-90 text-[#B2B2B2] font-medium'>
+                        F12BB587
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default TransactionsIndex

src/components/menu/SideMenu.tsx

@@ -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' }}