updated sidemenu w/ motion

heojay0309 · Dec 4, 2024 · ba3b783 · ba3b783
1 parent 0021709
commit ba3b783
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 57 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -9,13 +9,8 @@ import ExperienceContainer from "@/components/experience/ExperienceContainer";
 
 export default function Home() {
   const [activeSection, setActiveSection] = useState<string | null>(null);
-  const [showSideMenu, setShowSideMenu] = useState<boolean>(false);
 
   useEffect(() => {
-    const sections = document.querySelectorAll("section");
-    const mainProjectsSection = document.getElementById("projects");
-    const experiencesSection = document.getElementById("experiences");
-
     // Observer for active section tracking
     const sectionObserver = new IntersectionObserver(
       (entries) => {
@@ -33,52 +28,6 @@ export default function Home() {
       },
       { threshold: 0.1 },
     );
-    // Observer for menu visibility
-    const menuObserver = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          // If entering projects or experiences section
-          if (entry.isIntersecting) {
-            setShowSideMenu(true);
-          } else {
-            // Only hide if both sections are out of view
-            const projectsRect = mainProjectsSection?.getBoundingClientRect();
-            const experiencesRect = experiencesSection?.getBoundingClientRect();
-            const windowHeight = window.innerHeight;
-
-            const isProjectsVisible =
-              projectsRect &&
-              projectsRect.top < windowHeight &&
-              projectsRect.bottom > 0;
-            const isExperiencesVisible =
-              experiencesRect &&
-              experiencesRect.top < windowHeight &&
-              experiencesRect.bottom > 0;
-
-            if (!isProjectsVisible && !isExperiencesVisible) {
-              setShowSideMenu(false);
-            }
-          }
-        });
-      },
-      {
-        rootMargin: "-50px 0px -50px 0px",
-        threshold: [0, 0.1],
-      },
-    );
-
-    // Observe all sections for active section tracking
-    sections.forEach((section) => sectionObserver.observe(section));
-
-    // Observe main sections for menu visibility
-    if (mainProjectsSection) menuObserver.observe(mainProjectsSection);
-    if (experiencesSection) menuObserver.observe(experiencesSection);
-
-    return () => {
-      sections.forEach((section) => sectionObserver.unobserve(section));
-      if (mainProjectsSection) menuObserver.unobserve(mainProjectsSection);
-      if (experiencesSection) menuObserver.unobserve(experiencesSection);
-    };
   }, []);
 
   return (
@@ -117,7 +66,7 @@ export default function Home() {
               );
             })}
           </ExperienceContainer>
-          {showSideMenu && <SideMenu activeSection={activeSection} />}
+          <SideMenu activeSection={activeSection} />
           <Contact />
         </div>
       </div>

diff --git a/src/components/nav/SideMenu.tsx b/src/components/nav/SideMenu.tsx
@@ -3,23 +3,61 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { track } from "@vercel/analytics";
-
+import { motion, useScroll, useTransform } from "motion/react";
+import { useEffect, useRef, useState } from "react";
 interface SideMenuProps {
   activeSection?: string | null;
 }
 
 const SideMenu = ({ activeSection }: SideMenuProps) => {
   const path = usePathname();
+  const menuContentRef = useRef<HTMLDivElement>(null);
+  const [menuHeight, setMenuHeight] = useState(0);
+  const [windowHeight, setWindowHeight] = useState(0);
+  const { scrollY } = useScroll();
+  const [scrollHeight, setScrollHeight] = useState(0);
+
+  useEffect(() => {
+    setScrollHeight(document.documentElement.scrollHeight);
+  }, []);
+  const translateY = useTransform(
+    scrollY,
+    [0, Math.max(0, scrollHeight - windowHeight)],
+    [0, Math.max(0, windowHeight - menuHeight - 144)],
+    {
+      clamp: true,
+    },
+  );
   const isActive = (sectionId: string) => {
     return activeSection === sectionId ? "bg-opacity-10" : "bg-opacity-0";
   };
+  useEffect(() => {
+    const updateHeights = () => {
+      if (menuContentRef.current) {
+        const height = menuContentRef.current.offsetHeight;
+        setMenuHeight(height);
+        setWindowHeight(window.innerHeight);
+      }
+    };
+
+    updateHeights();
+    window.addEventListener("resize", updateHeights);
+    return () => window.removeEventListener("resize", updateHeights);
+  }, []);
 
   return (
     <div
-      className={`fixed top-[160px] hidden h-full tablet:right-[0px] tablet:block tablet:gap-[64px]`}
+      className={`fixed top-[144px] hidden h-full flex-col tablet:right-[0px] tablet:block`}
     >
-      <div
-        className={`${path === "/resume" && "hidden"} transition-all duration-700 ${activeSection === "intro" || activeSection === "top" ? "translate-x-[calc(100%+16px)] opacity-0 tablet:translate-x-[calc(100%+64px)]" : "max-h-full translate-x-0 opacity-100"} flex flex-col items-center gap-[16px] rounded-lg bg-white bg-opacity-10 tablet:gap-[16px] tablet:px-[8px] tablet:py-[8px]`}
+      <motion.div
+        ref={menuContentRef}
+        style={{
+          translateY,
+          transition: "transform 0.1s ease-out",
+        }}
+        className={`${path === "/resume" && "hidden"} flex flex-col items-center gap-[16px] rounded-lg bg-white bg-opacity-10 transition-all duration-500 tablet:px-[8px] tablet:py-[8px]`}
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
       >
         <Link
           href={"#intro"}
@@ -107,7 +145,7 @@ const SideMenu = ({ activeSection }: SideMenuProps) => {
             className="select-none tablet:h-[32px] tablet:w-[32px]"
           />
         </Link>
-      </div>
+      </motion.div>
     </div>
   );
 };