Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

the navbar overhaul #168

Merged
merged 6 commits into from
Apr 23, 2024
Merged

the navbar overhaul #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bd47999
added platform to navbar
AVDestroyer Apr 22, 2024
2d79f4e
navbar widens for the last time
Arc-blroth Apr 23, 2024
44da997
the navbar rework
Arc-blroth Apr 23, 2024
1d00ddf
fix #111 (this ironically does not touch `Navbar.module.css`)
Arc-blroth Apr 23, 2024
15c66ca
fix x overflow on Firefox on Windows w/ Windows 10 scrollbars enabled
Arc-blroth Apr 23, 2024
b54782e
fix win/macos style overscroll being light mode (aaaa)
Arc-blroth Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 89 additions & 24 deletions components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */}
Expand All @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand All @@ -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!
Expand Down
4 changes: 2 additions & 2 deletions styles/Home.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ h1.motto {
}

.comeToTheDarkSide {
width: 100vw;
width: 100%;
padding: 6rem 10%;

.cyberThings {
Expand Down Expand Up @@ -295,7 +295,7 @@ h1.motto {
}

.weHaveCookies {
width: 100vw;
width: 100%;
padding: 0 10% 16rem 10%;

.socials {
Expand Down
Loading