fix: main layout responsive styles

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

@@ -264,11 +264,11 @@ const MenuIndex = () => {
         </div>
 
         <motion.div
-          initial={{ y: -200 }}
-          animate={{ y: smallCategoriesVisible ? 0 : -200, opacity: smallCategoriesVisible ? 1 : 0 }}
+          initial={{ y: -5 }}
+          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',
+            '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',
             ``
           )}>
           <HorizontalScrollView className="w-full noscrollbar py-4!">

src/components/menu/SideMenu.tsx

@@ -116,9 +116,9 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
 
     const renderMenu = () => {
         return (
-            <section className="flex-1 overflow-y-scroll noscrollbar pt-20 pb-10 flex flex-col justify-between">
-                <div>
-                    <header className="px-12 pt-6 mt-3">
+            <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">
                         <h6 className="text-start font-bold text-sm text-menu-header mt-2 mb-[19px]">منو</h6>
                     </header>
 

src/components/menu/SideMenuItem.tsx

@@ -12,11 +12,11 @@ export default function SideMenuItem({ href, title, icon, className, children, .
             {...restProps}
             href={href}
             className={`
-        inline-flex gap-3 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}
-      `}
+                inline-flex gap-3 ps-9 md:ps-6 xl:ps-12 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}
+            `}
         >
             {children}
             <span className="flex-shrink-0">{icon}</span>

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 xl:hidden' onClick={toggleMenuState}>
+                    <button className='inline-block md: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 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 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)]">
         <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 xl:w-[calc(100%-285px)] xl: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 md:w-[calc(100%-175px)] xl:w-[calc(100%-285px)] md:self-end"
       >
         {children}
       </main>