From 8834ff88d42b595e7bfba5a628ecceb7cf5f937b Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Sun, 13 Jul 2025 02:28:52 +0330
Subject: [PATCH] fix: layouts and scrolls

---
 src/app/[name]/page.tsx                               | 2 +-
 src/components/menu/SideMenu.tsx                      | 4 ++--
 src/components/overlays/BlurredOverlayContainer.tsx   | 6 +++++-
 src/components/topbar/TopBar.tsx                      | 2 +-
 src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx | 4 ++--
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/[name]/page.tsx b/src/app/[name]/page.tsx
index 076b970..1300925 100644
--- a/src/app/[name]/page.tsx
+++ b/src/app/[name]/page.tsx
@@ -188,7 +188,7 @@ const MenuIndex = () => {
 
 
   return (
-    <div className="flex flex-col gap-4 pt-4 items-center">
+    <div className="flex flex-col gap-4 items-center">
       <SearchBox value={search} onChange={updateSearch} />
       <HorizontalScrollView className="w-full noscrollbar py-4!">
         {categories.map((item, index) => (
diff --git a/src/components/menu/SideMenu.tsx b/src/components/menu/SideMenu.tsx
index e479e05..bcd7978 100644
--- a/src/components/menu/SideMenu.tsx
+++ b/src/components/menu/SideMenu.tsx
@@ -75,13 +75,13 @@ function SideMenu({ menuState, toggleMenuState, nightModeState, togglenightModeS
     const menuStateMemo = useMemo(() => menuState, [menuState]);
 
     return (
-        <div className='w-full h-dvh'>
+        <div className='w-full'>
             <BlurredOverlayContainer bgOpacity={40} visible={menuStateMemo} onClick={toggleMenuState} outDelay={150}>
                 <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 ">
+                    <ul className="overflow-y-scroll 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]'>
diff --git a/src/components/overlays/BlurredOverlayContainer.tsx b/src/components/overlays/BlurredOverlayContainer.tsx
index 020dc69..c475279 100644
--- a/src/components/overlays/BlurredOverlayContainer.tsx
+++ b/src/components/overlays/BlurredOverlayContainer.tsx
@@ -41,6 +41,8 @@ const BlurredOverlayContainer = ({
   const variants: Variants = {
     hidden: {
       opacity: 0,
+      visibility: 'hidden',
+      display: 'none',
       transition: {
         delay: transitionDelay / 1000,
         duration: 0.3,
@@ -49,6 +51,8 @@ const BlurredOverlayContainer = ({
     },
     visible: {
       opacity: 1,
+      visibility: 'visible',
+      display: 'block',
       transition: {
         delay: transitionDelay / 1000,
         duration: 0.3,
@@ -64,7 +68,7 @@ const BlurredOverlayContainer = ({
       className={clsx(
         className,
         visible || loaded ? 'z-50' : !visible && !loaded ? '-z-50' : 'z-0',
-        'fixed inset-0 flex items-center justify-center h-dvh w-full backdrop-blur-sm',
+        'absolute inset-0 flex items-center justify-center h-full w-full backdrop-blur-sm',
       )}
       style={{
         backgroundColor: `rgba(0, 0, 0, ${bgOpacity / 100})`,
diff --git a/src/components/topbar/TopBar.tsx b/src/components/topbar/TopBar.tsx
index 7744e46..1be263b 100644
--- a/src/components/topbar/TopBar.tsx
+++ b/src/components/topbar/TopBar.tsx
@@ -22,7 +22,7 @@ type Props = {
 
 function TopBar({ profileDropState, toggleProfileDropState, menuState, toggleMenuState, searchModalState, toggleSearchModalState, nightModeState, toggleNightModeState }: Props) {
     return (
-        <div className="p-4 pb-0">
+        <div className="fixed top-0 left-0 w-full p-4 pb-0 z-40">
             <div className='bg-white grid grid-cols-3 overflow-hidden rounded-2xl w-full h-12 lg:h-24 px-2 sm:p-6 xl:gap-8 items-center'>
                 <div className='inline-flex justify-between items-center'>
                     <button className='inline-block xl:hidden' onClick={toggleMenuState}>
diff --git a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx b/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
index 869412b..43722bd 100644
--- a/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
+++ b/src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx
@@ -36,7 +36,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
   // }, [location])
 
   return (
-    <div className='h-screen overflow-hidden'>
+    <div className='h-full overflow-hidden py-10 px-4'>
       <header>
         <TopBar
           profileDropState={profileDrop} toggleProfileDropState={toggleProfileDrop}
@@ -44,7 +44,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
           searchModalState={searchModal} toggleSearchModalState={toggleSearchModal}
           nightModeState={nightMode} toggleNightModeState={toggleNightMode} />
       </header>
-      <main className="h-full px-4 pb-44 overflow-y-auto noscrollbar">
+      <main className="h-full pt-14 pb-14 overflow-y-auto noscrollbar">
         {children}
       </main>
       <aside>