From bd56ea7fe72fefafe9de4f0f5d4bf4b96b8ddc99 Mon Sep 17 00:00:00 2001 From: Akshat Singhai Date: Sun, 14 Jun 2026 01:22:39 +0530 Subject: [PATCH] feat:add active navigation section highlighting Signed-off-by: Akshat Singhai --- app/components/hero.tsx | 23 +++--- app/components/navbar.tsx | 165 ++++++++++++++++++++++++-------------- 2 files changed, 113 insertions(+), 75 deletions(-) diff --git a/app/components/hero.tsx b/app/components/hero.tsx index 4801393..e5300ad 100644 --- a/app/components/hero.tsx +++ b/app/components/hero.tsx @@ -11,8 +11,8 @@ export default function HeroSection() { return (

Learn Computer Science & Engineering
@@ -45,7 +42,7 @@ export default function HeroSection() {

Free, open, and beginner-friendly documentation @@ -58,9 +55,9 @@ export default function HeroSection() { const el = document.getElementById("subjects"); if (el) el.scrollIntoView({ behavior: "smooth" }); }} - className="mt-12 sm:mt-10 mb-8 sm:mb-8 px-6 sm:px-8 md:px-12 lg:px-18 - py-3 sm:py-3.5 md:py-5 lg:py-6 rounded-full - text-xl sm:text-xl md:text-2xl lg:text-4xl xl:text-5xl + className="mt-12 sm:mt-10 mb-8 px-8 sm:px-10 md:px-12 lg:px-16 + py-3 sm:py-4 md:py-5 lg:py-6 rounded-full + text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl bg-[#38220b] text-white hover:bg-[#2a1809] hover:scale-105 transition-all duration-300 cursor-pointer font-semibold" style={{ fontFamily: "'Rockwell', 'Serif', serif" }} diff --git a/app/components/navbar.tsx b/app/components/navbar.tsx index 988aeb5..5d2efb0 100644 --- a/app/components/navbar.tsx +++ b/app/components/navbar.tsx @@ -1,7 +1,8 @@ "use client"; import Link from "next/link"; import { Road_Rage } from "next/font/google"; -import { useState } from "react"; +import { useState, useEffect } from "react"; +import { usePathname } from "next/navigation"; const roadRage = Road_Rage({ variable: "--font-road-rage", @@ -11,55 +12,120 @@ const roadRage = Road_Rage({ export default function Navbar() { const [menuOpen, setMenuOpen] = useState(false); + const [activeSection, setActiveSection] = useState("home"); + const pathname = usePathname(); + + const isHomePage = pathname === "/"; + + useEffect(() => { + if (!isHomePage) return; + + const sections = ["subjects", "contribute", "sponsor"]; + + const observer = new IntersectionObserver( + (entries) => { + entries.forEach((entry) => { + if (entry.isIntersecting) { + setActiveSection(entry.target.id); + } + }); + }, + { + rootMargin: "-40% 0px -55% 0px", + threshold: 0, + } + ); + + sections.forEach((id) => { + const el = document.getElementById(id); + if (el) observer.observe(el); + }); + + const handleScroll = () => { + if (window.scrollY < 100) setActiveSection("home"); + }; + window.addEventListener("scroll", handleScroll, { passive: true }); + + return () => { + observer.disconnect(); + window.removeEventListener("scroll", handleScroll); + }; + }, [isHomePage]); + + const linkClass = (section: string) => { + const isActive = isHomePage && activeSection === section; + return `transition-colors duration-200 cursor-pointer ${isActive + ? "text-[#d2b48c] border-b-2 border-[#d2b48c] pb-0.5" + : "hover:text-[#d2b48c]" + }`; + }; + + const navLinks = (onClickFn?: () => void) => ( + <> +

  • + + HOME + +
    • +
  • + + SUBJECTS + +
    • +
  • + + CONTRIBUTE + +
    • +
  • + + SPONSOR + +
    • +
  • + + QUIZ + +
    • + + ); return (