Merge pull request #168 from uclaacm/navbar

the navbar overhaul
uclaacm · Apr 23, 2024 · d279231 · d279231
2 parents 0d9ef95 + b54782e
commit d279231
Show file tree

Hide file tree

Showing 5 changed files with 294 additions and 98 deletions.
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -9,22 +9,24 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 
 export default function Navbar() {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(Array(5).fill(false));
   const router = useRouter();
 
   // Close the navbar when the route changes
   useEffect(() => {
-    setOpen(false);
-  }, [router.pathname]);
+    setOpen(Array(5).fill(false));
+  }, [router.pathname, globalThis.location?.hash]);
 
   return (
     <nav className={styles.navbar}>
       <input
         className={styles.hamburgerToggle}
         id="hamburger-toggle"
         type="checkbox"
-        checked={open}
-        onChange={() => setOpen(!open)}
+        checked={open[0]}
+        onChange={() => {
+          setOpen([!open[0], ...open.slice(1)]);
+        }}
       ></input>
 
       {/* LEFT PART OF THE NAVBAR */}
@@ -45,26 +47,89 @@ export default function Navbar() {
       </label>
 
       <ul className={styles.right}>
-        <Link className={styles.hoverable} href="/about">
-          <li>About</li>
-        </Link>
-        <Link className={styles.hoverable} href="/members">
-          <li>Members</li>
-        </Link>
-        <Link className={styles.hoverable} href="/events">
-          <li>Events</li>
-        </Link>
-        <Link className={styles.hoverable} href="/blog">
-          <li>Blog</li>
-        </Link>
-        <Link className={styles.hoverable} href="/archive">
-          <li>Archive</li>
-        </Link>
+        {["about", "events", "blog", "links"].map((x, i) => (
+          <input
+            className={`${styles.subnavToggle} ${styles[`subnav-${x}-toggle`]}`}
+            id={`subnav-${x}-toggle`}
+            key={x}
+            type="checkbox"
+            checked={open[i + 1]}
+            onChange={() => {
+              setOpen([
+                ...open.slice(0, i + 1),
+                !open[i + 1],
+                ...open.slice(i + 2),
+              ]);
+            }}
+          ></input>
+        ))}
+
+        <label htmlFor="subnav-about-toggle">
+          <li>
+            About
+            <ul>
+              <Link href="/about#about-top">
+                <li>Who We Are</li>
+              </Link>
+              <Link href="/about#what-we-do">
+                <li>What We Do</li>
+              </Link>
+              <Link href="/members">
+                <li>Members</li>
+              </Link>
+            </ul>
+          </li>
+        </label>
+        <label htmlFor="subnav-events-toggle">
+          <li>
+            Events
+            <ul>
+              <Link href="/events">
+                <li>Upcoming</li>
+              </Link>
+              <Link href="/archive">
+                <li>Archive</li>
+              </Link>
+            </ul>
+          </li>
+        </label>
+        <label htmlFor="subnav-blog-toggle">
+          <li>
+            Blog
+            <ul>
+              <Link href="/blog">
+                <li>The Cyblog</li>
+              </Link>
+              <Link href="https://pbr.acmcyber.com/blog">
+                <li>The PBR Blog</li>
+              </Link>
+            </ul>
+          </li>
+        </label>
+        <label htmlFor="subnav-links-toggle">
+          <li>
+            Links
+            <ul>
+              <Link href="https://discord.com/invite/j9dgf2q">
+                <li>Discord</li>
+              </Link>
+              <Link href="https://platform.acmcyber.com">
+                <li>CTF Platform</li>
+              </Link>
+              <Link href="https://pbr.acmcyber.com">
+                <li>PBR</li>
+              </Link>
+              <Link href="https://lac.tf">
+                <li>LA CTF</li>
+              </Link>
+              <Link href="https://status.acmcyber.com">
+                <li>Status</li>
+              </Link>
+            </ul>
+          </li>
+        </label>
         <li>
-          <button
-            onClick={() => (window.location.href = "/join")}
-            className={styles.join}
-          >
+          <button className={styles.join}>
             <Link href="/join">Join Us</Link>
           </button>
         </li>

diff --git a/pages/about.tsx b/pages/about.tsx
@@ -12,7 +12,7 @@ export default function About() {
       />
       <div className="page">
         <div className="content">
-          <h1>About</h1>
+          <h1 id="about-top">About</h1>
           <img
             src="/images/ctf-experts.png"
             alt="A talk from two CTF experts."
@@ -29,7 +29,7 @@ export default function About() {
             the students at UCLA!
           </p>
 
-          <h2>What We Do</h2>
+          <h2 id="what-we-do">What We Do</h2>
           <p>
             ACM Cyber is home to a wide variety of events and projects hosted
             throughout the year. Check out our main initiatives below!

diff --git a/styles/Home.module.scss b/styles/Home.module.scss
@@ -102,7 +102,7 @@ h1.motto {
 }
 
 .comeToTheDarkSide {
-  width: 100vw;
+  width: 100%;
   padding: 6rem 10%;
 
   .cyberThings {
@@ -295,7 +295,7 @@ h1.motto {
 }
 
 .weHaveCookies {
-  width: 100vw;
+  width: 100%;
   padding: 0 10% 16rem 10%;
 
   .socials {