Compare commits
2 Commits
6ebe4eed3d
...
b1efd5c345
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b1efd5c345 | ||
|
|
1eeafee58e |
@ -4,6 +4,7 @@ import React from 'react';
|
|||||||
import Header from './nav/Header';
|
import Header from './nav/Header';
|
||||||
import Footer from './Footer';
|
import Footer from './Footer';
|
||||||
import GlobalAnimatedBackground from '../background/GlobalAnimatedBackground';
|
import GlobalAnimatedBackground from '../background/GlobalAnimatedBackground';
|
||||||
|
import PageTransitionEffect from './animation/pageTransitionEffect';
|
||||||
|
|
||||||
// Utility to detect mobile devices
|
// Utility to detect mobile devices
|
||||||
function isMobileDevice() {
|
function isMobileDevice() {
|
||||||
@ -33,10 +34,17 @@ export default function PageLayout({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
|
{/* Main content now participates in normal document flow */}
|
||||||
|
<div className="flex-1 relative z-10 w-full flex flex-col">
|
||||||
|
<PageTransitionEffect>{children}</PageTransitionEffect>
|
||||||
|
</div>
|
||||||
|
=======
|
||||||
{/* Main content grows to fill available space */}
|
{/* Main content grows to fill available space */}
|
||||||
<main className="flex-1 relative z-10 w-full overflow-y-auto">
|
<main className="flex-1 relative z-10 w-full overflow-y-auto">
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
|
>>>>>>> 6ebe4eed3d7f8ef6bedea5dcf742bc73462a8af8
|
||||||
|
|
||||||
{showFooter && (
|
{showFooter && (
|
||||||
<div className="relative z-50 flex-shrink-0">
|
<div className="relative z-50 flex-shrink-0">
|
||||||
|
|||||||
36
src/app/components/animation/pageTransitionEffect.tsx
Normal file
36
src/app/components/animation/pageTransitionEffect.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const PageTransitionEffect = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
const variants = {
|
||||||
|
hidden: { opacity: 0, x: 0, y: 20 },
|
||||||
|
enter: { opacity: 1, x: 0, y: 0 },
|
||||||
|
exit: { opacity: 0, x: 0, y: -20 },
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence
|
||||||
|
mode="wait"
|
||||||
|
onExitComplete={() => window.scrollTo(0, 0)}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
key={pathname}
|
||||||
|
variants={variants}
|
||||||
|
initial="hidden"
|
||||||
|
animate="enter"
|
||||||
|
exit="exit"
|
||||||
|
transition={{ type: 'tween', duration: 0.3 }}
|
||||||
|
className="flex-1 w-full flex flex-col"
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.div>
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageTransitionEffect;
|
||||||
Loading…
Reference in New Issue
Block a user