From fc151dee4fb4e47aeec1e9588d09b0cd3284b7fd Mon Sep 17 00:00:00 2001
From: shivanshiv <shivanshi.visvanatha@ucalgary.ca>
Date: Sat, 22 Nov 2025 22:30:18 -0700
Subject: [PATCH] Add top nav dropdown with auto-scroll to page sections
 (Closes #528)

---
 src/App.tsx                |  25 ++++++++-
 src/components/Navbar.css  |  27 +++++++++
 src/components/Navbar.tsx  | 111 ++++++++++++++++++++++++++++++++++---
 src/pages/ApplyPage.tsx    |   6 +-
 src/pages/HomePage.tsx     |   8 ++-
 src/pages/ProjectsPage.tsx |   5 +-
 src/pages/TeamPage.tsx     |   4 +-
 7 files changed, 166 insertions(+), 20 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1b8f2c4e..cd8314fe 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,8 +6,8 @@ import TeamPage from "pages/TeamPage";
 import ProjectsPage from "pages/ProjectsPage";
 import MerchPage from "pages/MerchPage";
 
-import { useEffect } from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import React, { useEffect } from "react";
+import { BrowserRouter as Router, Route, Switch, useLocation } from "react-router-dom";
 import Navbar from "components/Navbar";
 import Footer from "components/Footer/Footer";
 import "./App.css";
@@ -16,6 +16,26 @@ import "aos/dist/aos.css";
 import ScrollToTop from "components/ScrollToTop";
 import GalleryPage from "pages/GalleryPage";
 
+function ScrollToHash() {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.hash) {
+      setTimeout(() => {
+        const id = location.hash.replace('#', '');
+        const element = document.getElementById(id);
+        if (element) {
+          const yOffset = -80;
+          const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+          window.scrollTo({ top: y, behavior: 'smooth' });
+        }
+      }, 100);
+    }
+  }, [location]);
+
+  return null;
+}
+
 function App() {
   //
   useEffect(() => {
@@ -24,6 +44,7 @@ function App() {
   // Use React Router to switch between different pages
   return (
     <Router>
+      <ScrollToHash />
       <ScrollToTop />
       <div className="App">
         <Navbar />
diff --git a/src/components/Navbar.css b/src/components/Navbar.css
index 85c9d716..f5b549dc 100644
--- a/src/components/Navbar.css
+++ b/src/components/Navbar.css
@@ -166,3 +166,30 @@
   opacity: 0;
   display: none;
 }
+
+/* Navigation sections with subsections */
+.navbar__section {
+  display: block;
+}
+
+.navbar__subsections {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: 5px 0 0 40px;
+  margin: 0;
+}
+
+.navbar__subsections li {
+  margin: 3px 0;
+}
+
+.navbar__subsections a {
+  font-size: 0.85rem;
+  color: #ccc;
+  transition: color 0.3s ease;
+}
+
+.navbar__subsections a:hover {
+  color: var(--primary-green);
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 4cb6dbf5..38a2166e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -60,14 +60,109 @@ const Header = () => {
         </a>
         <nav className="navbar__content ">
           <motion.ul initial={{ y: -250 }} animate={{ y: 0 }}>
-            <NavbarLink top="homePageTop" link="/" name="About" />
-            <NavbarLink top="teamPageTop" link="/team" name="Team" />
-            <NavbarLink
-              top="projectsPageTop"
-              link="/projects"
-              name="Projects"
-            />
-            <NavbarLink top="applyPageTop" link="/apply" name="Apply" />
+            <li className="navbar__section">
+              <a href="#">
+                <LinkScroll to="homePageTop" spy={true} offset={-80} duration={500}>
+                  <Link onClick={hideNavbar} to="/">
+                    About
+                  </Link>
+                </LinkScroll>
+              </a>
+              <ul className="navbar__subsections">
+                <li>
+                  <Link onClick={hideNavbar} to="/#projects">
+                    Tech Start Projects
+                  </Link>
+                </li>
+                <li>
+                  <Link onClick={hideNavbar} to="/#events">
+                    Events
+                  </Link>
+                </li>
+                <li>
+                  <Link onClick={hideNavbar} to="/#sponsors">
+                    Our Sponsors
+                  </Link>
+                </li>
+              </ul>
+            </li>
+
+            <li className="navbar__section">
+              <a href="#">
+                <LinkScroll to="teamPageTop" spy={true} offset={-80} duration={500}>
+                  <Link onClick={hideNavbar} to="/team">
+                    Team
+                  </Link>
+                </LinkScroll>
+              </a>
+              <ul className="navbar__subsections">
+                <li>
+                  <Link onClick={hideNavbar} to="/team#the-board">
+                    The Board
+                  </Link>
+                </li>
+                <li>
+                  <Link onClick={hideNavbar} to="/team#our-team">
+                    Our Team
+                  </Link>
+                </li>
+              </ul>
+            </li>
+
+            <li className="navbar__section">
+              <a href="#">
+                <LinkScroll to="projectsPageTop" spy={true} offset={-80} duration={500}>
+                  <Link onClick={hideNavbar} to="/projects">
+                    Projects
+                  </Link>
+                </LinkScroll>
+              </a>
+              <ul className="navbar__subsections">
+                <li>
+                  <Link onClick={hideNavbar} to="/projects#showcase-winners">
+                    Final Showcase Winners
+                  </Link>
+                </li>
+                <li>
+                  <Link onClick={hideNavbar} to="/projects#featured-projects">
+                    Featured Projects
+                  </Link>
+                </li>
+                <li>
+                  <Link onClick={hideNavbar} to="/projects#past-projects">
+                    Past Projects
+                  </Link>
+                </li>
+              </ul>
+            </li>
+
+            <li className="navbar__section">
+              <a href="#">
+                <LinkScroll to="applyPageTop" spy={true} offset={-80} duration={500}>
+                  <Link onClick={hideNavbar} to="/apply">
+                    Apply
+                  </Link>
+                </LinkScroll>
+              </a>
+              <ul className="navbar__subsections">
+                <li>
+                  <Link onClick={hideNavbar} to="/apply#what-we-do">
+                    What We Do
+                  </Link>
+                </li>
+                <li>
+                  <Link onClick={hideNavbar} to="/apply#faq">
+                    FAQ
+                  </Link>
+                </li>
+                <li>
+                  <Link onClick={hideNavbar} to="/apply#applications">
+                    Applications
+                  </Link>
+                </li>
+              </ul>
+            </li>
+
             <NavbarLink top="merchPageTop" link="/merch" name="Merch" />
             <NavbarLink top="galleryPageTop" link="/gallery" name="Gallery" />
             <NavbarLink top="docsPageTop" link="/resources" name="Resources" />
diff --git a/src/pages/ApplyPage.tsx b/src/pages/ApplyPage.tsx
index bcca0dfc..29e9d8d1 100644
--- a/src/pages/ApplyPage.tsx
+++ b/src/pages/ApplyPage.tsx
@@ -53,7 +53,7 @@ const ApplyPage = () => {
         </div>
       </header>
 
-      <div className="applyPage__introContainer">
+      <div className="applyPage__introContainer" id="what-we-do">
         <Blobbie
           id={8}
           width={400}
@@ -105,7 +105,7 @@ const ApplyPage = () => {
         <img src={execs_24} alt="Tech Start Members" />
       </div>
 
-      <div className="applyPage__container applyPage__projectIntroContainer">
+      <div className="applyPage__container applyPage__projectIntroContainer" id="faq">
         <div className="applyPage__projectIntroImg">
           <Lottie options={applyPageTeamLottieOptions} />
         </div>
@@ -227,7 +227,7 @@ const ApplyPage = () => {
         />
       </div>
 
-      <div className="applyPage__container applyPage__applicationContainer">
+      <div className="applyPage__container applyPage__applicationContainer" id="applications">
         <div className="applyPage__application">
           <Blobbie
             id={2}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 220ae183..85feb8e0 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -106,9 +106,11 @@ const HomePage = () => {
         </div>
       </section>
 
-      <ProjectsSection />
+      <div id="projects">
+        <ProjectsSection />
+      </div>
 
-      <section className="homePage__section homePage__section--events">
+      <section className="homePage__section homePage__section--events" id="events">
         <Blobbie
           id={3}
           width={400}
@@ -129,7 +131,7 @@ const HomePage = () => {
         </div>
       </section>
 
-      <section className="homePage__section homePage__section--sponsors">
+      <section className="homePage__section homePage__section--sponsors" id="sponsors">
         <Blobbie
           id={9}
           width={800}
diff --git a/src/pages/ProjectsPage.tsx b/src/pages/ProjectsPage.tsx
index adaa9223..1e9004d1 100644
--- a/src/pages/ProjectsPage.tsx
+++ b/src/pages/ProjectsPage.tsx
@@ -41,6 +41,7 @@ const ProjectsPage = () => {
       <h2
         className="chonkyHeading chonkyHeading--white chonkyHeading--lessMargin"
         style={{ marginTop: "0px" }}
+        id="showcase-winners"
       >
         Final Showcase Winners
       </h2>
@@ -120,13 +121,13 @@ const ProjectsPage = () => {
         </S.WrapDiv>
       </div>
       <ProjectKeywordsSection />
-      <h2 className="chonkyHeading chonkyHeading--white chonkyHeading--lessMargin">
+      <h2 className="chonkyHeading chonkyHeading--white chonkyHeading--lessMargin" id="featured-projects">
         Featured Projects
       </h2>
       <Divider />
       <FeaturedProjectSection featuredProjects={featuredProjects} />
 
-      <h2 className="chonkyHeading chonkyHeading--white chonkyHeading--lessMargin">
+      <h2 className="chonkyHeading chonkyHeading--white chonkyHeading--lessMargin" id="past-projects">
         Past Projects
       </h2>
       <Divider />
diff --git a/src/pages/TeamPage.tsx b/src/pages/TeamPage.tsx
index 52d90f18..4079cd5e 100644
--- a/src/pages/TeamPage.tsx
+++ b/src/pages/TeamPage.tsx
@@ -61,12 +61,12 @@ const TeamPage = () => {
         </motion.div>
       </S.TeamPageHeader>
 
-      <h1 className="chonkyHeading chonkyHeading--white chonkyHeading--lessMargin">
+      <h1 className="chonkyHeading chonkyHeading--white chonkyHeading--lessMargin" id="the-board">
         The Board
       </h1>
       <Divider />
       <FounderSection />
-      <T.TeamSection>
+      <T.TeamSection id="our-team">
         <Team
           teamMembers={boardMembers}
           desktopView={defaultView}