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({
-            window.scrollTo({
+            top: 0,
-                top: 0,
+            behavior: 'instant'
-                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 logoTimer = setTimeout(() => {
+        const cleanup = () => {
-            setShowLogo(false);
+            setShowLogo(false)
-        }, 800);
+            setShowContent(true)
+            setIsAnimating(false)
+            setIsTransitioning(false)
+        }
 
-        const transitionTimer = setTimeout(() => {
+        if (location.pathname) {
-            handleTransitionEnd();
+            startTransition()
-        }, 1000);
 
-        handleTransitionStart();
+            const logoTimer = setTimeout(() => {
+                setShowLogo(false)
+            }, 800)
 
-        return () => {
+            const contentTimer = setTimeout(() => {
-            clearTimeout(logoTimer);
+                finishTransition()
-            clearTimeout(transitionTimer);
+            }, 1000)
-            unlockScroll();
+
-        };
+            return () => {
-    }, [location.pathname, handleTransitionStart, handleTransitionEnd, unlockScroll]);
+                clearTimeout(logoTimer)
+                clearTimeout(contentTimer)
+                cleanup()
+            }
+        }
+
+        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,
                         }}
                     >
-                        {children}
+                        <div className={isAnimating ? 'pointer-events-none' : ''}>
+                            {children}
+                        </div>
                     </motion.div>
                 )}
             </AnimatePresence>