fix: layouts

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

@@ -18,7 +18,7 @@ function FoodPage({ }: Props) {
     const price = 0; // TODO: Replace with actual price if needed
 
     return (
-        <div className='w-full -translate-y-2'>
+        <div className='w-full -translate-y-2 pt-6'>
             <div className="relative w-full rounded-2xl overflow-hidden">
                 <Image
                     className='w-full'

src/app/[name]/about/AboutPage.tsx

@@ -195,7 +195,7 @@ function AboutPage({ data }: Readonly<{ data: AboutDataModel; }>) {
   }
 
   return (
-    <div>
+    <div className='pt-8 h-full overflow-y-auto noscrollbar'>
       <TabContainer>
         <TabHeader
           viewRenderer={firstTab()}

src/app/[name]/chat/[id]/page.tsx

@@ -12,13 +12,13 @@ function ChatIndex({ }: Props) {
     };
 
     return (
-        <section className='h-full pb-8'>
+        <section className="flex flex-col h-full pt-6">
-            <h1 className='font-medium'>علی مصلحی</h1>
+            <h1 className="font-medium">علی مصلحی</h1>
 
-            <div className='bg-container rounded-[30px] mt-6 pt-7 px-6 pb-8 h-full relative'>
+            <div className="bg-container rounded-[30px] mt-6 flex flex-col flex-1 px-6 pt-7 pb-8 overflow-hidden">
-                <section aria-labelledby='پیام های اخیر'>
+                <div className="flex-1 overflow-y-auto">
-                    <ul className='grid gap-6'>
+                    <ul className="grid gap-6 pb-6 ">
-                        <li className='bg-[#F6F7FA] rounded-[30px] p-6'>
+                        <li className='bg-[#F6F7FA] rounded-[30px] rounded-tr-none p-6'>
                             <article>
                                 <p className='text-xs2'>
                                     لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
@@ -30,7 +30,61 @@ function ChatIndex({ }: Props) {
                             </article>
                         </li>
 
-                        <li className='bg-[#EBEDF5] rounded-[30px] p-6'>
+                        <li className='bg-[#EBEDF5] rounded-[30px] rounded-tl-none p-6'>
+                            <article>
+                                <h6 className='text-xs font-medium'>
+                                    سیما فرهادی
+                                </h6>
+                                <p className='text-xs2 mt-2.5'>
+                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است،
+                                </p>
+
+                                <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
+                                    10:07  |  1403/09/30
+                                </span>
+                            </article>
+                        </li>
+
+                        <li className='bg-[#F6F7FA] rounded-[30px] rounded-tr-none p-6'>
+                            <article>
+                                <p className='text-xs2'>
+                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
+                                </p>
+
+                                <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
+                                    10:07  |  1403/09/30
+                                </span>
+                            </article>
+                        </li>
+
+                        <li className='bg-[#EBEDF5] rounded-[30px] rounded-tl-none p-6'>
+                            <article>
+                                <h6 className='text-xs font-medium'>
+                                    سیما فرهادی
+                                </h6>
+                                <p className='text-xs2 mt-2.5'>
+                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است،
+                                </p>
+
+                                <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
+                                    10:07  |  1403/09/30
+                                </span>
+                            </article>
+                        </li>
+
+                        <li className='bg-[#F6F7FA] rounded-[30px] rounded-tr-none p-6'>
+                            <article>
+                                <p className='text-xs2'>
+                                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
+                                </p>
+
+                                <span dir='ltr' className='text-[11px] float-end text-disabled-text mt-2.5'>
+                                    10:07  |  1403/09/30
+                                </span>
+                            </article>
+                        </li>
+
+                        <li className='bg-[#EBEDF5] rounded-[30px] rounded-tl-none p-6'>
                             <article>
                                 <h6 className='text-xs font-medium'>
                                     سیما فرهادی
@@ -45,23 +99,30 @@ function ChatIndex({ }: Props) {
                             </article>
                         </li>
                     </ul>
-                </section>
+                </div>
 
-                <section aria-labelledby='ارسال پیام' className="absolute w-full bottom-8 left-0 px-6">
+                <section aria-labelledby="ارسال پیام" className="w-full">
                     <form
                         action={submitMessage}
-                        className="focus-within:outline-blue-400 outline outline-transparent transition-colors duration-100 flex items-center gap-0 bg-transparent border border-[#D0D0D0] h-12 rounded-xl py-2.5 px-2 mt-6">
+                        className="focus-within:outline-blue-400 outline outline-transparent transition-colors duration-100 flex items-center gap-0 bg-transparent border border-[#D0D0D0] h-12 rounded-xl py-2.5 px-2"
-                        <button type='button' className='active:bg-neutral-100 transition-colors duration-150 rounded-full p-1'><Microphone2 className='stroke-foreground' size={24} /></button>
+                    >
+                        <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1">
+                            <Microphone2 className="stroke-foreground" size={24} />
+                        </button>
                         <input
-                            name='textMessage'
+                            name="textMessage"
-                            role='textbox'
+                            role="textbox"
-                            autoComplete='off'
+                            autoComplete="off"
-                            className='w-full text-[11px] h-full outline-none ms-1'
+                            className="w-full text-[11px] h-full outline-none ms-1"
-                            type='text'
+                            type="text"
-                            placeholder='پیام خود را بنویسید'
+                            placeholder="پیام خود را بنویسید"
                         />
-                        <button type='button' className='active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5'><EmojiHappy className='stroke-disabled2' size={20} /></button>
+                        <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5">
-                        <button type='button' className='active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5'><Paperclip2 className='stroke-disabled2' size={20} /></button>
+                            <EmojiHappy className="stroke-disabled2" size={20} />
+                        </button>
+                        <button type="button" className="active:bg-neutral-100 transition-colors duration-150 rounded-full p-1.5">
+                            <Paperclip2 className="stroke-disabled2" size={20} />
+                        </button>
                     </form>
                 </section>
             </div>

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

@@ -56,8 +56,14 @@ function ChatIndex() {
 
 
     return (
-        <section ref={containerRef} className="h-full pb-8 relative overflow-hidden">
+        <section ref={containerRef} className="h-full relative">
             <section className="relative h-full w-full mt-7">
+                <motion.div
+                    className='size-[1145px] rounded-full fixed top-1/2 left-1/2 -translate-1/2'
+                    style={{ background: 'linear-gradient(180deg, #EAECF0 4.52%, #DBDEE8 95.02%)', willChange: 'transform' }}
+                >
+                </motion.div>
+
                 <motion.div
                     animate={{ scale: [1, 0.95, 1] }}
                     transition={{ repeat: Infinity, duration: 13 }}
@@ -108,7 +114,7 @@ function ChatIndex() {
                 >
                 </motion.div>
 
-                <div className='grid grid-cols-6 grid-rows-6'>
+                <div>
                     {positions.length === users.length &&
                         users.map((v, i) => (
                             <Link

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

@@ -156,7 +156,7 @@ function OrdersIndex() {
 
 
     return (
-        <div>
+        <div className='pt-8'>
             <TabContainer>
                 <TabHeader
                     viewRenderer={<PerformantTabRenderer rowHeight={310}>{firstTab()}</PerformantTabRenderer>}

src/app/[name]/page.tsx

@@ -218,28 +218,30 @@ const MenuIndex = () => {
 
 
   return (
-    <div className="flex flex-col gap-4 items-center" ref={wrapperRef}>
+    <div className="flex flex-col gap-4 items-center pt-8" ref={wrapperRef}>
-      <SearchBox value={search} onChange={updateSearch} />
+      <div className="w-full">
-      <HorizontalScrollView className="w-full noscrollbar py-4!">
+        <SearchBox value={search} onChange={updateSearch} />
-        {categories.map((item, index) => (
+        <HorizontalScrollView className="w-full noscrollbar mt-4! py-4!">
-          <CategoryItemRenderer
+          {categories.map((item, index) => (
-            key={index}
+            <CategoryItemRenderer
-            className={clsx(
+              key={index}
-              index === +selectedCategory && "bg-white!",
+              className={clsx(
-            )}
+                index === +selectedCategory && "bg-white!",
-            onClick={() => updateCategory(index)}
+              )}
-          >
+              onClick={() => updateCategory(index)}
-            <Image
+            >
-              priority
+              <Image
-              src="/assets/images/food-image.png"
+                priority
-              width={32}
+                src="/assets/images/food-image.png"
-              height={32}
+                width={32}
-              alt="category image"
+                height={32}
-            />
+                alt="category image"
-            <span className="text-xs text-black">{item.title}</span>
+              />
-          </CategoryItemRenderer>
+              <span className="text-xs text-black">{item.title}</span>
-        ))}
+            </CategoryItemRenderer>
-      </HorizontalScrollView>
+          ))}
+        </HorizontalScrollView>
+      </div>
 
       <section className="w-full">
         <div className="flex justify-between items-center relative" ref={smallCategoriesRef} >
@@ -249,7 +251,7 @@ const MenuIndex = () => {
           <div className="inline-flex gap-2 justify-around items-center">
             <button onClick={toggleFilterModal} className="rounded-xl h-8 bg-white ps-4 pe-2 py-1.5 inline-flex items-center justify-between gap-[7px]">
               <EqualizerIcon />
-              <span className="text-xs leading-5">فیلتر بر اساس</span>
+              <span className="text-xs leading-5 font-medium">فیلتر بر اساس</span>
             </button>
             <button onClick={toggleSortingModal} className="rounded-lg h-8 bg-white p-1.5">
               <TextAlignIcon />

src/app/[name]/rating/[orderId]/page.tsx

@@ -80,10 +80,10 @@ function RatingOrderIndex({ }: Props) {
     }
 
     return (
-        <section className='min-h-full'>
+        <section className='flex flex-col h-full pt-6'>
             <h1 className='font-medium'>امتیاز شما به رستوران</h1>
 
-            <form action={submitForm} className='bg-container h-full flex flex-col justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
+            <form action={submitForm} className='bg-container flex flex-col h-min justify-between rounded-[30px] pt-10 px-6 pb-7.5 mt-4'>
 
                 <div>
                     <div className='w-full'>

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

@@ -3,7 +3,7 @@ import React from 'react'
 
 function TransactionsIndex() {
     return (
-        <section>
+        <section className='pt-6'>
             <h1 className='font-medium'>کدهای تخفیف</h1>
 
             <section

src/app/globals.css

@@ -68,7 +68,7 @@ input[type="password"] {
 
 /* width */
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 4px;
   height: 6px;
 }
 

src/app/layout.tsx

@@ -15,13 +15,15 @@ export default function RootLayout({
 
   return (
 
-    <html lang="en">
+    <html lang="en" className="h-svh overflow-hidden">
       <body
         dir="rtl"
-        className={`antialiased bg-background h-full`}
+        className={`antialiased bg-background h-svh overflow-hidden`}
       >
         <ReactQueryProvider>
-          {children}
+          <div id="root" className="h-svh overflow-hidden">
+            {children}
+          </div>
         </ReactQueryProvider>
       </body>
     </html>

src/app/profile/edit/page.tsx

@@ -56,12 +56,12 @@ function ProfileIndex({ }: Props) {
     }
 
     return (
-        <>
+        <div className='h-full noscrollbar overflow-y-auto flex flex-col'>
             <div className='relative text-center'>
                 <div className='font-medium text-sm2 leading-6'>ویرایش اطلاعات</div>
             </div>
 
-            <div className="mt-8 bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+            <div className="mt-8  flex-1 bg-container rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
 
                 <div className="">
                     <div className="justify-self-center w-fit relative text-center pb-10"
@@ -158,7 +158,7 @@ function ProfileIndex({ }: Props) {
                     <Button className='bg-neutral-200! text-disabled-text!'>انصراف</Button>
                 </div>
             </div>
-        </>
+        </div>
     )
 }
 

src/app/profile/page.tsx

@@ -24,15 +24,15 @@ function ProfileIndex({ }: Props) {
     // }, [isAuthenticated])
 
     return (
-        <>
+        <div className='overflow-y-auto h-full noscrollbar flex flex-col'>
             <div className='relative text-center'>
-                <div className='font-bold text-sm2 leading-6'>پروفایل کاربری</div>
+                <h1 className='font-bold text-sm2 leading-6'>پروفایل کاربری</h1>
                 <button className='absolute top-0 left-0'>
                     <ArrowLeft size={24} className='stroke-foreground' />
                 </button>
             </div>
 
-            <div className="mt-8 bg-white rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
+            <div className="mt-8 flex-1 h-full bg-white rounded-container w-full box-shadow-normal py-6 px-4 flex flex-col justify-between">
 
                 <div className="">
                     <div className="flex items-center justify-start gap-4 pb-6 border-b-[1.5px] border-border">
@@ -85,7 +85,7 @@ function ProfileIndex({ }: Props) {
                     </Link>
                 </div>
             </div>
-        </>
+        </div>
     )
 }
 

src/components/input/SearchBox.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export default function SearchBox({ value, onChange }: Props) {
   return (
-    <div className="bg-white inline-flex rounded-xl px-4 h-12 w-full items-center content-center">
+    <div className="bg-white inline-flex rounded-xl px-4 h-10 w-full items-center content-center">
       <SearchIcon stroke="#8C90A3" />
       <input
         onChange={onChange}

src/components/listview/MenuItem.tsx

@@ -33,7 +33,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
       />
       <div className="w-full inline-flex flex-col justify-between">
         <div>
-          <div className="text-sm2 font-medium">{food.name}</div>
+          <div className="text-sm2 font-normal text-black">{food.name}</div>
           <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
             {food.contains}
           </div>
@@ -50,7 +50,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
                 className="inline-flex w-full justify-center items-center gap-2"
               >
                 <PlusIcon />
-                <div className="text-sm2 pt-0.5 font-medium">افزودن</div>
+                <div className="text-sm2 pt-0.5 font-normal text-black">افزودن</div>
               </button>
             ) : (
               <>

src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx

@@ -36,28 +36,42 @@ function ClientMenuRouteWrapper({ children }: Props) {
   // }, [location])
 
   return (
-    <div className='h-full overflow-hidden py-10 '>
+    <div className="h-svh overflow-hidden pt-16 flex flex-col pb-8 ">
-      <header className='px-4'>
+
+      <div className="fixed top-0 left-0 right-0 z-50 px-4">
         <TopBar
-          profileDropState={profileDrop} toggleProfileDropState={toggleProfileDrop}
+          profileDropState={profileDrop}
-          menuState={menuState} toggleMenuState={toggleMenuState}
+          toggleProfileDropState={toggleProfileDrop}
-          searchModalState={searchModal} toggleSearchModalState={toggleSearchModal}
+          menuState={menuState}
-          nightModeState={nightMode} toggleNightModeState={toggleNightMode} />
+          toggleMenuState={toggleMenuState}
-      </header>
+          searchModalState={searchModal}
-      <main className="h-full px-4 pt-14 pb-14 lg:pt-28 overflow-y-auto noscrollbar">
+          toggleSearchModalState={toggleSearchModal}
+          nightModeState={nightMode}
+          toggleNightModeState={toggleNightMode}
+        />
+      </div>
+
+
+      <div className="fixed bottom-0 left-0 right-0 z-50 px-4">
+        <BottomNavBar />
+      </div>
+
+
+      <SideMenu
+        nightModeState={nightMode}
+        togglenightModeState={toggleNightMode}
+        menuState={menuState}
+        toggleMenuState={toggleMenuState}
+      />
+
+
+      <main
+        className="noscrollbar overflow-y-auto h-svh pt-0 pb-12 outline mx-2 outline-blue-500 px-4"
+      >
         {children}
       </main>
-      <aside>
-
-        <SideMenu 
-          nightModeState={nightMode} togglenightModeState={toggleNightMode}
-          menuState={menuState} toggleMenuState={toggleMenuState} />
-      </aside>
-      <footer className='px-4'>
-        <BottomNavBar />
-
-      </footer>
     </div>
+
   )
 }