From a090c27e4b341a18aaecd7f090f4182e869a4f65 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Thu, 31 Jul 2025 20:19:16 +0330
Subject: [PATCH] fix: layout problem after adding transition

---
 src/app/[name]/(Main)/layout.tsx             | 4 ++--
 src/app/[name]/(Main)/page.tsx               | 6 +++---
 src/components/wrapper/ClientSideWrapper.tsx | 6 ++++--
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/[name]/(Main)/layout.tsx b/src/app/[name]/(Main)/layout.tsx
index 2b4a10a..f7652e0 100644
--- a/src/app/[name]/(Main)/layout.tsx
+++ b/src/app/[name]/(Main)/layout.tsx
@@ -1,5 +1,5 @@
-import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper";
 import ClientMenuRouteWrapper from "@/components/wrapper/ClientMenuRouteWrapper.tsx";
+import ClientSideWrapper from "@/components/wrapper/ClientSideWrapper";
 
 export const metadata = {
   title: 'Menu',
@@ -13,7 +13,7 @@ export default function MenuLayout({
 
   return (
     <ClientMenuRouteWrapper>
-      <ClientSideWrapper>
+      <ClientSideWrapper className=''>
         {children}
       </ClientSideWrapper>
     </ClientMenuRouteWrapper>
diff --git a/src/app/[name]/(Main)/page.tsx b/src/app/[name]/(Main)/page.tsx
index 82307a4..4ca26da 100644
--- a/src/app/[name]/(Main)/page.tsx
+++ b/src/app/[name]/(Main)/page.tsx
@@ -160,9 +160,9 @@ const MenuIndex = () => {
   const [smallCategoriesVisible, setSmallCategoriesVisibility] = useState(false);
 
   const onScroll = useCallback(() => {
-    if (!wrapperRef?.current?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
+    if (!wrapperRef?.current?.parentElement?.parentElement?.scrollTop || !smallCategoriesRef.current?.offsetTop) return;
 
-    if (wrapperRef.current.parentElement.scrollTop >= smallCategoriesRef.current.offsetTop) {
+    if (wrapperRef.current.parentElement?.parentElement.scrollTop >= smallCategoriesRef.current.offsetTop) {
       setSmallCategoriesVisibility(true);
     } else {
       setSmallCategoriesVisibility(false);
@@ -172,7 +172,7 @@ const MenuIndex = () => {
   useEffect(() => {
     if (!wrapperRef.current) return;
 
-    const parent = wrapperRef.current.parentElement;
+    const parent = wrapperRef.current.parentElement?.parentElement;
     if (!parent) return;
 
     parent.addEventListener('scroll', onScroll);
diff --git a/src/components/wrapper/ClientSideWrapper.tsx b/src/components/wrapper/ClientSideWrapper.tsx
index 271b384..212f831 100644
--- a/src/components/wrapper/ClientSideWrapper.tsx
+++ b/src/components/wrapper/ClientSideWrapper.tsx
@@ -1,14 +1,16 @@
 'use client'
 
+import clsx from 'clsx'
 import { AnimatePresence, motion } from 'framer-motion'
 import { usePathname } from 'next/navigation'
 import React from 'react'
 
 type Props = {
   children: React.ReactNode
+  className?: string
 }
 
-function ClientSideWrapper({ children }: Props) {
+function ClientSideWrapper({ children, className = 'h-full' }: Props) {
   const pathname = usePathname()
 
   return (
@@ -19,7 +21,7 @@ function ClientSideWrapper({ children }: Props) {
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0, y: 0, transition: { duration: 0 } }}
         transition={{ duration: 0.3 }}
-        className="h-full" 
+        className={clsx(className)}
       >
         {children}
       </motion.div>