Fix Animations, Sidebar and Footer.

src/components/PageTransition.tsx

@@ -37,52 +37,62 @@ const PageTransition = ({ children }: PageTransitionProps) => {
     const location = useLocation()
     const [showLogo, setShowLogo] = useState(false)
     const [showContent, setShowContent] = useState(true)
-    const { setIsTransitioning, lockScroll, unlockScroll } = useScrollContext()
+    const { setIsTransitioning } = useScrollContext()
+    const [isAnimating, setIsAnimating] = useState(false)
 
     const resetScroll = useCallback(() => {
-        requestAnimationFrame(() => {
         window.scrollTo({
             top: 0,
             behavior: 'instant'
-            });
+        })
-        });
+    }, [])
-    }, []);
 
-    const handleTransitionStart = useCallback(() => {
+    const startTransition = useCallback(() => {
-        setIsTransitioning(true);
+        setIsAnimating(true)
-        lockScroll();
+        setIsTransitioning(true)
-        setShowContent(false);
+        setShowContent(false)
-        setShowLogo(true);
+        setShowLogo(true)
-    }, [setIsTransitioning, lockScroll]);
+    }, [setIsTransitioning])
 
-    const handleTransitionEnd = useCallback(() => {
+    const finishTransition = useCallback(() => {
-        setShowContent(true);
+        setShowContent(true)
-        setShowLogo(false);
+        setShowLogo(false)
-        setIsTransitioning(false);
+        setIsAnimating(false)
-        unlockScroll();
+        setIsTransitioning(false)
-        resetScroll();
+        resetScroll()
-    }, [setIsTransitioning, unlockScroll, resetScroll]);
+    }, [setIsTransitioning, resetScroll])
 
     useEffect(() => {
+        const cleanup = () => {
+            setShowLogo(false)
+            setShowContent(true)
+            setIsAnimating(false)
+            setIsTransitioning(false)
+        }
+
+        if (location.pathname) {
+            startTransition()
+
             const logoTimer = setTimeout(() => {
-            setShowLogo(false);
+                setShowLogo(false)
-        }, 800);
+            }, 800)
 
-        const transitionTimer = setTimeout(() => {
+            const contentTimer = setTimeout(() => {
-            handleTransitionEnd();
+                finishTransition()
-        }, 1000);
+            }, 1000)
-
-        handleTransitionStart();
 
             return () => {
-            clearTimeout(logoTimer);
+                clearTimeout(logoTimer)
-            clearTimeout(transitionTimer);
+                clearTimeout(contentTimer)
-            unlockScroll();
+                cleanup()
-        };
+            }
-    }, [location.pathname, handleTransitionStart, handleTransitionEnd, unlockScroll]);
+        }
+
+        return cleanup
+    }, [location.pathname, startTransition, finishTransition])
 
     return (
-        <div className="relative min-h-screen bg-zinc-900">
+        <div className={`relative min-h-screen bg-zinc-900 ${isAnimating ? 'pointer-events-none' : ''}`}>
             <AnimatePresence mode="wait">
                 {showLogo && (
                     <motion.div
@@ -111,7 +121,9 @@ const PageTransition = ({ children }: PageTransitionProps) => {
                             ease: customEase,
                         }}
                     >
+                        <div className={isAnimating ? 'pointer-events-none' : ''}>
                             {children}
+                        </div>
                     </motion.div>
                 )}
             </AnimatePresence>