chore: change a few styles

2025-07-11 22:18:36 +03:30
parent 09bfd832d4
commit 9a551f1518
6 changed files with 31 additions and 29 deletions
@@ -0,0 +1,108 @@
+'use client';
+
+import React, { useMemo } from 'react'
+import MenuItemType 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 DirectboxReceiveIcon from '../icons/DirectboxReceiveIcon';
+import BlurredOverlayContainer from '../overlays/BlurredOverlayContainer';
+import SettingIcon from '../icons/SettingsIcon';
+import ExitIcon from '../icons/ExitIcon';
+import NightModeSwitch from '../button/NightModeSwitch';
+
+type MenuItemType = {
+    href: string | undefined;
+    title: string;
+    icon: React.ReactElement
+}
+
+const menuItems: Array<Array<MenuItemType>> = [
+    [
+        {
+            href: '/', title: 'صفحه اصلی', icon: <NotificationBellIcon width={20} height={20} className='text-icon-deactive' />
+        },
+        {
+            href: 'my-services', title: 'سرویس های من', icon: <CupIcon width={20} height={20} className='text-icon-deactive' />
+        },
+        {
+            href: 'services', title: 'سایر سرویس ها', icon: <TicketDiscountIcon width={20} height={20} className='text-icon-deactive' />
+        },
+        {
+            href: 'invoices', title: 'لیست', icon: <CalendarSearchIcon width={20} height={20} className='text-icon-deactive' />
+        },
+        {
+            href: 'transactions', title: 'تراکنش ها', icon: <ReceiptIcon width={20} height={20} className='text-icon-deactive' />
+        },
+        {
+            href: '/', title: 'صفحه اصلی', icon: <GameControllerIcon width={20} height={20} className='text-icon-deactive' />
+        },
+        {
+            href: 'my-services', title: 'سرویس های من', icon: <ThumbsUpIcon width={20} height={20} className='text-icon-deactive' />
+        },
+        {
+            href: 'services', title: 'سایر سرویس ها', icon: <NoteBoardIcon width={20} height={20} className='text-icon-deactive' />
+        },
+        {
+            href: 'invoices', title: 'نصب اپلیکیشن', icon: <DirectboxReceiveIcon width={20} height={20} className='text-icon-deactive' />
+        },
+    ],
+    [],
+    [
+        {
+            href: undefined, title: 'تنظیمات', icon: <SettingIcon width={20} height={20} className='text-icon-deactive' />
+        },
+        {
+            href: undefined, title: 'خروج', icon: <ExitIcon width={20} height={20} className='text-icon-deactive' />
+        },
+    ]
+]
+
+type Props = {
+    menuState: boolean,
+    toggleMenuState: React.MouseEventHandler<HTMLDivElement> | undefined
+    nightModeState: boolean,
+    togglenightModeState: React.MouseEventHandler<HTMLDivElement> | undefined
+}
+
+function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeState }: Props) {
+    const menuStateMemo = useMemo(() => menuState, [menuState]);
+
+    return (
+        <div className='w-full h-dvh'>
+            <BlurredOverlayContainer bgOpacity='40' visible={menuStateMemo} onClick={toggleMenuState} changeDelay='300'>
+                <div
+                    data-isvisible={menuStateMemo}
+                    onClick={(e) => { e.stopPropagation(); }}
+                    className={`fixed top-0 bottom-0 -right-full data-[isvisible=true]:right-0 transition-all duration-100 ease-in-out not-xl:!rounded-s-none overflow-clip bg-white w-[200px] h-dvh flex flex-col z-40`}>
+                    <ul className="overflow-hidden noscrollbar pt-20 pb-10 flex flex-col justify-between h-full ">
+                        <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>
+                                    {menuItems[0].map((v, i) => {
+                                        return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
+                                    })}
+                                </div>
+                            </div>
+                        </li>
+                        <li className='flex flex-col gap-6 pt-16'>
+                            {menuItems[2].map((v, i) => {
+                                return <SideMenuItem key={i} href={v.href || ''} title={v.title} icon={v.icon} />
+                            })}
+                            <SideMenuItem href={''} title={''} icon={<></>}><NightModeSwitch checked={nightModeState} onClick={togglenightModeState} /></SideMenuItem>
+                        </li>
+                    </ul>
+                </div>
+            </BlurredOverlayContainer>
+        </div>
+    )
+}
+
+export default SideMenu;