fix: side menu responsive style

src/app/[name]/(Main)/page.tsx

@@ -268,7 +268,7 @@ const MenuIndex = () => {
           animate={{ y: smallCategoriesVisible ? 0 : -50, opacity: smallCategoriesVisible ? 1 : 0 }}
           transition={{ duration: .1 }}
           className={clsx(
-            'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] backdrop-blur-[44px] right-0 md:pr-48 xl:pr-72 xl:pt-20',
+            'fixed left-0 z-10 top-0 px-4 pt-16 bg-[#F4F5F9CC] backdrop-blur-[44px] right-0 xl:pr-72 xl:pt-20',
             ``
           )}>
           <HorizontalScrollView className="w-full noscrollbar py-4!">

src/components/menu/SideMenu.tsx

@@ -28,7 +28,7 @@ const menuItems: Array<Array<MenuItemType>> = [
         { 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: 'game', title: 'Games', icon: Game },
         { href: '?share', title: 'ShareWithFriends', icon: Like1 },
         { href: 'report', title: 'ReportProblem', icon: NoteBoardIcon },
         { href: 'invoices', title: 'InstallApp', icon: DirectboxReceive }
@@ -108,7 +108,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
         return (
             <section className="flex-1 overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between md:w-[160px] xl:w-[285px]">
                 <div className=''>
-                    <header className="px-12 pt-6 mt-3 md:px-6 xl:px-12">
+                    <header className="px-8 pt-6 mt-3 md:px-6 xl:px-12">
                         <h6 className="text-start font-bold text-sm text-menu-header mt-2 mb-[19px]">منو</h6>
                     </header>
 
@@ -193,7 +193,7 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
         <>
             <div className='w-full' ref={closeRef} onClick={toggleMenuState}>
                 <aside aria-label={tMenu('AriaLabel')}>
-                    <BlurredOverlayContainer className='md:hidden!' bgOpacity={40} visible={menuStateMemo} outDelay={150} inDuration={200}>
+                    <BlurredOverlayContainer className='xl:hidden!' bgOpacity={40} visible={menuStateMemo} outDelay={150} inDuration={200}>
                         <motion.nav
                             drag='x'
                             dragConstraints={{ left: 0, right: 20 }}
@@ -212,9 +212,11 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
                             {renderMenu()}
                         </motion.nav>
                     </BlurredOverlayContainer>
-                    <div className="hidden fixed top-4 bottom-4 right-4 bg-white xl:w-[250px] md:flex flex-col z-40 overflow-clip md:rounded-4xl">
+                    <nav 
+                        className="hidden fixed top-4 bottom-4 right-4 bg-white xl:w-[250px] xl:flex flex-col z-40 overflow-clip xl:rounded-4xl"
+                        >
                         {renderMenu()}
-                    </div>
+                    </nav>
                 </aside>
             </div>
 

src/components/menu/SideMenuItem.tsx

@@ -12,7 +12,7 @@ export default function SideMenuItem({ href, title, icon, className, children, .
             {...restProps}
             href={href}
             className={`
-                inline-flex gap-3 ps-9 md:ps-6 xl:ps-12 h-full w-full items-center overflow-hidden text-nowrap
+                inline-flex gap-3 ps-9 md:ps-6 xl:ps-9 h-full w-full items-center overflow-hidden text-nowrap
                 text-xs font-light text-disabled-text border-transparent
                 data-[active]:border-s-6 data-[active]:border-black data-[active]:text-black
                 ${className}

src/components/topbar/TopBar.tsx

@@ -26,7 +26,7 @@ function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMen
         <div className="w-full">
             <div className='grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 xl:gap-8 items-center'>
                 <div className='inline-flex justify-between items-center'>
-                    <button className='inline-block md:hidden' onClick={toggleMenuState}>
+                    <button className='inline-block xl:hidden' onClick={toggleMenuState}>
                         <BurgerMenuIcon />
                     </button>
                     {/* <div onClick={toggleSearchModalState} className='xl:bg-[#EEF0F7] xl:hidden inline-flex rounded-xl px-4 h-12 xl:w-[370px] items-center content-center' >

src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx

@@ -38,7 +38,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
   return (
     <div className="h-svh overflow-hidden pt-10 flex flex-col pb-4 xl:pt-12">
 
-      <div className="z-50 fixed right-4 left-4 md:right-[188px] xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]">
+      <div className="z-50 fixed right-4 left-4 xl:right-[285px] top-4 xl:h-16 h-12 flex items-center px-4 bg-white justify-between rounded-[32px] xl:w-[calc(100%-305px)]">
         <TopBar
           profileDropState={profileDrop}
           toggleProfileDropState={toggleProfileDrop}
@@ -66,7 +66,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
 
 
       <main
-        className="noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 pb-12 px-4 xl:pr-0 xl:pl-5 w-full md:w-[calc(100%-175px)] xl:w-[calc(100%-285px)] md:self-end"
+        className="noscrollbar overflow-y-auto h-svh pt-6 xl:pt-8 pb-12 px-4 xl:pr-0 xl:pl-5 w-full xl:w-[calc(100%-285px)] md:self-end"
       >
         {children}
       </main>