Added dropdown for 'About' page sections

src/components/Navbar.css

@@ -80,7 +80,6 @@
 
 .navbar__content li {
   margin-bottom: 1em;
-  margin-left: 1em;
 }
 
 .navbar__content a {
@@ -93,6 +92,7 @@
 
 .navbar__content a:hover {
   color: var(--primary-green);
+  cursor: pointer;
 }
 
 .navbar__nav-toggle:checked ~ nav {
@@ -133,10 +133,13 @@
   .navbar__content ul {
     display: flex;
   }
+  .navbar__item ul {
+    display: none;
+  }
 
   .navbar__content li {
-    margin-left: 3em;
     margin-bottom: 0;
+    margin: 20px;
   }
 
   .navbar__content a {
@@ -166,3 +169,63 @@
   opacity: 0;
   display: none;
 }
+
+/* Navbar + dropdown styles */
+.navbar__item {
+  position: relative;
+  font-size: 0.7em;
+}
+
+.dropdown {
+  display: none;
+  position: absolute;
+  background-color: black;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 1;
+  flex-direction: column;
+  top: 100%;
+  left: -45px;
+}
+
+.navbar__item:hover .dropdown {
+  display: flex;
+  transition: all 0.5s ease;
+}
+
+.dropdown li {
+  padding: 5px 1px;
+  text-decoration: none;
+  color: white;
+  display: block;
+}
+
+.dropdown li:hover {
+  background-color: #1a1a1a;
+}
+
+.navbar__link {
+  padding: 10px 20px;
+  color: white;
+  text-decoration: none;
+  font-size: 0.2rem;
+}
+
+.navbar__link:hover {
+  color: #ddd;
+}
+
+@media screen and (max-width: 1400px) {
+  .navbar__content ul {
+    margin-left: 1em;
+    padding: 8px;
+  }
+  .dropdown li {
+    margin-left: 40px;
+  }
+  .dropdown {
+    margin-top: 20px;
+    background-color: #1a1a1a;
+    font-size: 2px;
+  }
+}

src/components/Navbar.tsx

@@ -16,25 +16,13 @@ const Header = () => {
     setNavbarExpanded(false);
   };
 
-  type NavbarLinkProps = {
-    top: string;
-    link: string;
-    name: string;
+  const scrollToSection = (sectionId: string) => {
+    hideNavbar();
+    setTimeout(() => {
+      document.getElementById(sectionId)?.scrollIntoView({ behavior: "smooth" });
+    }, 0);
   };
 
-  const NavbarLink = (props: NavbarLinkProps) => (
-    <li>
-      <a href="#">
-        <LinkScroll to={props.top} spy={true} offset={-80} duration={500}>
-          <Link onClick={hideNavbar} to={props.link}>
-            {" "}
-            {props.name}{" "}
-          </Link>
-        </LinkScroll>
-      </a>
-    </li>
-  );
-
   return (
     <header className="navbar__container">
       <div className="navbar">
@@ -45,8 +33,7 @@ const Header = () => {
           id="navbar__nav-toggle"
           className="navbar__nav-toggle"
         />
-        <a href="#">
-          <LinkScroll to="homePageTop" spy={true} offset={-70} duration={500}>
+         <LinkScroll to="homePageTop" spy={true} offset={-70} duration={500}>
             <Link to="/">
               <motion.img
                 initial={{ y: -250 }}
@@ -57,20 +44,22 @@ const Header = () => {
               />
             </Link>
           </LinkScroll>
-        </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" />
-            <NavbarLink top="merchPageTop" link="/merch" name="Merch" />
-            <NavbarLink top="galleryPageTop" link="/gallery" name="Gallery" />
-            <NavbarLink top="docsPageTop" link="/resources" name="Resources" />
+            <li className="navbar__item">
+              <Link to="/" > About </Link>
+              <ul className="dropdown">
+                <li onClick={() => scrollToSection('projects')}><Link to="/" onClick={hideNavbar}>  Our Projects &#8594;</Link></li>
+                <li onClick={() => scrollToSection('events')}><Link to="/" onClick={hideNavbar}> Events &#8594;</Link></li>
+                <li onClick={() => scrollToSection('sponsors')}><Link to="/" onClick={hideNavbar}> Sponsors &#8594;</Link></li>
+              </ul>
+            </li>
+            <li><Link to="/team" onClick={hideNavbar}>Team</Link></li>
+            <li><Link to="/projects" onClick={hideNavbar}>Projects</Link></li>
+            <li><Link to="/apply" onClick={hideNavbar}>Apply</Link></li>
+            <li><Link to="/gallery" onClick={hideNavbar}>Gallery</Link></li>
+            <li><Link to="/resources" onClick={hideNavbar}>Resources</Link></li>
           </motion.ul>
         </nav>
         <label

src/components/ProjectSection/ProjectsSection.tsx

@@ -11,7 +11,7 @@ export const ProjectsSection = () => {
   const { width } = useViewport(); // get screen width
 
   return (
-    <S.ProjectsSection>
+    <S.ProjectsSection id="projects">
       {width > 1200 ? (
         <div className="homePage__container">
           <h1 className="chonkyHeading chonkyHeading--white chonkyHeading--lessMargin">

src/pages/HomePage.tsx

@@ -99,7 +99,7 @@ const HomePage = () => {
 
       <ProjectsSection />
 
-      <section className="homePage__section homePage__section--events">
+      <section className="homePage__section homePage__section--events" id="events">
         <Blobbie
           id={3}
           width={400}
@@ -120,7 +120,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}