fix: layout problem after adding transition

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>

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);

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>