From 7d527ec24f9a534739d22c8539cf8b1814dd8d20 Mon Sep 17 00:00:00 2001
From: Mahyar Khanbolooki <mahyarkhn@proton.me>
Date: Thu, 31 Jul 2025 19:52:17 +0330
Subject: [PATCH] add: simple transition effect to layouts

---
 src/app/[name]/(Dialogs)/layout.tsx          |  9 +++++---
 src/app/[name]/(Main)/layout.tsx             | 11 ++++------
 src/app/[name]/(Profile)/layout.tsx          |  9 +++++---
 src/components/wrapper/ClientSideWrapper.tsx | 23 ++++++++++++++++----
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/app/[name]/(Dialogs)/layout.tsx b/src/app/[name]/(Dialogs)/layout.tsx
index 662ff4c..d194a54 100644
--- a/src/app/[name]/(Dialogs)/layout.tsx
+++ b/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>
     )
 }
 
diff --git a/src/app/[name]/(Main)/layout.tsx b/src/app/[name]/(Main)/layout.tsx
index bd8fd24..2b4a10a 100644
--- a/src/app/[name]/(Main)/layout.tsx
+++ b/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>
   );
 }
diff --git a/src/app/[name]/(Profile)/layout.tsx b/src/app/[name]/(Profile)/layout.tsx
index f122f93..6d06c7a 100644
--- a/src/app/[name]/(Profile)/layout.tsx
+++ b/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>
     )
 }
 
diff --git a/src/components/wrapper/ClientSideWrapper.tsx b/src/components/wrapper/ClientSideWrapper.tsx
index f6e1e14..271b384 100644
--- a/src/components/wrapper/ClientSideWrapper.tsx
+++ b/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
\ No newline at end of file
+export default ClientSideWrapper