add: simple transition effect to layouts

src/app/[name]/(Dialogs)/layout.tsx

@@ -1,12 +1,15 @@
 'use client';
 
+import ClientSideWrapper from '@/components/wrapper/ClientSideWrapper';
 import React from 'react'
 
 function DialogsLayout({ children }: { children: React.ReactNode }) {
     return (
-        <main className='h-full w-full bg-container lg:bg-background pt-4 pb-6 px-6'>
-            {children}
-        </main>
+        <ClientSideWrapper>
+            <main className='h-full w-full bg-container lg:bg-background pt-4 pb-6 px-6'>
+                {children}
+            </main>
+        </ClientSideWrapper>
     )
 }
 

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

@@ -7,18 +7,15 @@ export const metadata = {
 
 export default function MenuLayout({
   children,
-  report
 }: Readonly<{
   children: React.ReactNode;
-  report: React.ReactNode,
 }>) {
 
   return (
-    <ClientSideWrapper>
-      <ClientMenuRouteWrapper>
+    <ClientMenuRouteWrapper>
+      <ClientSideWrapper>
         {children}
-        {report}
-      </ClientMenuRouteWrapper>
-    </ClientSideWrapper>
+      </ClientSideWrapper>
+    </ClientMenuRouteWrapper>
   );
 }

src/app/[name]/(Profile)/layout.tsx

@@ -1,12 +1,15 @@
 'use client';
 
+import ClientSideWrapper from '@/components/wrapper/ClientSideWrapper';
 import React from 'react'
 
 function DialogsLayout({ children }: { children: React.ReactNode }) {
     return (
-        <main className='h-full w-full bg-background pt-4 pb-6 px-6'>
-            {children}
-        </main>
+        <ClientSideWrapper>
+            <main className='h-full w-full bg-background pt-4 pb-6 px-6'>
+                {children}
+            </main>
+        </ClientSideWrapper>
     )
 }
 

src/components/wrapper/ClientSideWrapper.tsx

@@ -1,15 +1,30 @@
 'use client'
 
+import { AnimatePresence, motion } from 'framer-motion'
+import { usePathname } from 'next/navigation'
 import React from 'react'
 
-type Props = { } & React.AllHTMLAttributes<HTMLBodyElementEventMap>
+type Props = {
+  children: React.ReactNode
+}
 
 function ClientSideWrapper({ children }: Props) {
+  const pathname = usePathname()
+
   return (
-    <>
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={pathname} 
+        initial={{ opacity: 0, y: -10, }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: 0, transition: { duration: 0 } }}
+        transition={{ duration: 0.3 }}
+        className="h-full" 
+      >
         {children}
-    </>
+      </motion.div>
+    </AnimatePresence>
   )
 }
 
-export default ClientSideWrapper
+export default ClientSideWrapper