added intersection observer for nav

Author: liyunze-coding

src/components/ui/NavigationBar.tsx

@@ -1,10 +1,5 @@
 import { cn } from "@/lib/utils";
-import {
-	AnimatePresence,
-	motion,
-	useScroll,
-	useMotionValueEvent,
-} from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
 import { Cross as HamburgerCross } from "hamburger-react";
 import { useEffect, useState, useRef } from "react";
 
@@ -25,10 +20,48 @@ export const HoverNavigation = ({
 	className?: string;
 }) => {
 	const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+	const [activeIndex, setActiveIndex] = useState<number | null>(null);
 	const [hamburgerOpen, setHamburgerOpen] = useState(false);
 	const hamburgerRef = useRef<HTMLDivElement>(null);
 	const menuRef = useRef<HTMLDivElement>(null);
 
+	// Track which section is in view
+	useEffect(() => {
+		const sectionIds = items.map((item) => {
+			const url = new URL(item.link, window.location.origin);
+			return url.hash.replace("#", "");
+		});
+
+		const observers: IntersectionObserver[] = [];
+
+		sectionIds.forEach((id, idx) => {
+			if (!id) return;
+
+			const element = document.getElementById(id);
+			if (!element) return;
+
+			const observer = new IntersectionObserver(
+				(entries) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							setActiveIndex(idx);
+						}
+					});
+				},
+				{
+					rootMargin: "-20% 0px -50% 0px",
+				},
+			);
+
+			observer.observe(element);
+			observers.push(observer);
+		});
+
+		return () => {
+			observers.forEach((observer) => observer.disconnect());
+		};
+	}, [items]);
+
 	useEffect(() => {
 		const handleClickOutside = (event: MouseEvent) => {
 			if (
@@ -48,6 +81,9 @@ export const HoverNavigation = ({
 		};
 	}, [hamburgerOpen]);
 
+	// Use hoveredIndex when hovering, otherwise use activeIndex
+	const displayIndex = hoveredIndex !== null ? hoveredIndex : activeIndex;
+
 	return (
 		<>
 			<div className="bg-secondary/50 fixed top-5 left-1/2 z-30 box-border hidden -translate-x-1/2 items-center justify-center overflow-auto rounded-[40px] border-2 border-solid border-gray-700 px-5 py-3 backdrop-blur-md md:flex md:w-11/12 lg:w-2/3 xl:w-auto">
@@ -76,7 +112,7 @@ export const HoverNavigation = ({
 											}
 										>
 											<AnimatePresence>
-												{hoveredIndex === idx && (
+												{displayIndex === idx && (
 													<motion.span
 														className="absolute inset-0 z-10 block h-full w-full rounded-3xl bg-neutral-100"
 														layoutId="hoverBackground"

src/pages/projects.astro

@@ -10,7 +10,7 @@ import Footer from "../components/global/FooterComponent.astro";
 	description="View what projects RythonDev has made"
 	thumbnail="/images/profile/contact_photo.webp"
 >
-	<div id="projects" class="pt-20">
+	<div class="pt-20">
 		<h1 class="mt-10 text-center text-5xl">Projects</h1>
 		<!-- other projects -->
 		<MoreProjects />