2021-05-18 03:16:32 -04:00
|
|
|
import Link from "next/link";
|
|
|
|
import { useRouter } from "next/router";
|
2021-08-13 04:16:37 -04:00
|
|
|
import React, { useReducer } from "react";
|
|
|
|
|
2021-05-20 23:30:52 -04:00
|
|
|
import { Image } from "./Image";
|
2021-08-13 04:16:37 -04:00
|
|
|
|
2021-05-18 03:16:32 -04:00
|
|
|
import styles from "./Navbar.module.css";
|
|
|
|
|
2021-07-07 18:13:39 -04:00
|
|
|
type Menu = {
|
2021-05-18 03:16:32 -04:00
|
|
|
name: string;
|
|
|
|
route: string;
|
|
|
|
submenu?: {
|
|
|
|
name: string;
|
|
|
|
route: string;
|
|
|
|
}[];
|
2021-07-07 18:13:39 -04:00
|
|
|
}[];
|
2021-05-18 03:16:32 -04:00
|
|
|
|
2021-07-07 18:13:39 -04:00
|
|
|
const menu: Menu = [
|
2021-05-18 03:16:32 -04:00
|
|
|
{
|
|
|
|
name: "Home",
|
|
|
|
route: "/",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "About",
|
|
|
|
route: "/about",
|
|
|
|
submenu: [
|
|
|
|
{
|
|
|
|
name: "About Us",
|
|
|
|
route: "/about",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Meet the Team",
|
|
|
|
route: "/about/team",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Constitution",
|
|
|
|
route: "/about/constitution",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Code of Conduct",
|
|
|
|
route: "/about/code-of-conduct",
|
|
|
|
},
|
2021-06-21 21:22:54 -04:00
|
|
|
{
|
|
|
|
name: "Our Supporters",
|
|
|
|
route: "/about/our-supporters",
|
|
|
|
},
|
2021-05-18 03:16:32 -04:00
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Get Involved",
|
|
|
|
route: "/get-involved",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Events",
|
|
|
|
route: "/events",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Resources",
|
2021-05-26 12:13:54 -04:00
|
|
|
route: "/resources/services",
|
|
|
|
submenu: [
|
|
|
|
{
|
|
|
|
name: "Services",
|
|
|
|
route: "/resources/services",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "Tech Talks",
|
|
|
|
route: "/resources/tech-talks",
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: "CS Club Wiki",
|
2021-07-07 18:13:39 -04:00
|
|
|
route: "https://wiki.csclub.uwaterloo.ca",
|
2021-05-26 12:13:54 -04:00
|
|
|
},
|
|
|
|
],
|
2021-05-18 03:16:32 -04:00
|
|
|
},
|
|
|
|
];
|
|
|
|
|
2021-07-07 18:13:39 -04:00
|
|
|
export function Navbar() {
|
2021-05-18 03:16:32 -04:00
|
|
|
const router = useRouter();
|
2021-07-07 18:13:39 -04:00
|
|
|
const [state, dispatch] = useReducer(reducer, initialState);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<nav className={styles.navbar}>
|
|
|
|
<div className={styles.navContent}>
|
|
|
|
<Link href="/">
|
|
|
|
<a className={styles.logo}>
|
|
|
|
<Image src="/images/logo-icon.svg" alt="CSC Logo" />
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
<button
|
|
|
|
className={styles.hamburger}
|
|
|
|
onClick={() => dispatch({ type: "open", route: router.pathname })}
|
|
|
|
>
|
|
|
|
<Image src="/images/hamburger.svg" alt="Menu" />
|
|
|
|
</button>
|
|
|
|
<div
|
|
|
|
className={
|
|
|
|
state.isNavOpen
|
|
|
|
? `${styles.navMobileBackground} ${styles.show}`
|
|
|
|
: styles.navMobileBackground
|
|
|
|
}
|
|
|
|
onClick={() => dispatch({ type: "close" })}
|
|
|
|
/>
|
|
|
|
<div className={styles.navMenuWrapper}>
|
|
|
|
<Link href="/">
|
|
|
|
<a
|
|
|
|
className={styles.logoMobile}
|
|
|
|
onClick={() => dispatch({ type: "close" })}
|
|
|
|
>
|
|
|
|
<Image src="/images/logo-icon.svg" alt="CSC Logo" />
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
<ul className={styles.navMenu}>
|
|
|
|
{menu.map((item) => {
|
|
|
|
return (
|
|
|
|
<li className={styles.itemWrapper} key={item.name}>
|
|
|
|
<NavItem
|
|
|
|
name={item.name}
|
|
|
|
route={item.route}
|
|
|
|
submenu={item.submenu}
|
|
|
|
mainRouteActive={state.activeSubmenus.has(
|
|
|
|
getMainRoute(item.route)
|
|
|
|
)}
|
|
|
|
onClose={() => dispatch({ type: "close" })}
|
|
|
|
onToggle={(route) => dispatch({ type: "toggle", route })}
|
|
|
|
/>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
interface MobileState {
|
|
|
|
isNavOpen: boolean;
|
|
|
|
activeSubmenus: Set<string>; // strings are NavLink routes
|
|
|
|
}
|
|
|
|
|
|
|
|
type MobileAction =
|
|
|
|
| { type: "open"; route: string }
|
|
|
|
| { type: "toggle"; route: string }
|
|
|
|
| { type: "close" };
|
|
|
|
|
|
|
|
const initialState: MobileState = {
|
|
|
|
isNavOpen: false,
|
|
|
|
activeSubmenus: new Set(),
|
|
|
|
};
|
|
|
|
|
|
|
|
function reducer(state: MobileState, action: MobileAction): MobileState {
|
|
|
|
switch (action.type) {
|
|
|
|
case "open":
|
|
|
|
return {
|
|
|
|
isNavOpen: true,
|
|
|
|
activeSubmenus: new Set([getMainRoute(action.route)]),
|
|
|
|
};
|
|
|
|
case "toggle": {
|
|
|
|
const newSet = new Set(state.activeSubmenus);
|
|
|
|
if (state.activeSubmenus.has(getMainRoute(action.route))) {
|
|
|
|
newSet.delete(getMainRoute(action.route));
|
|
|
|
} else {
|
|
|
|
newSet.add(getMainRoute(action.route));
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
isNavOpen: state.isNavOpen,
|
|
|
|
activeSubmenus: newSet,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
case "close":
|
|
|
|
return initialState;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
interface NavItemProps {
|
|
|
|
name: string;
|
|
|
|
route: string;
|
|
|
|
submenu?: {
|
|
|
|
name: string;
|
|
|
|
route: string;
|
|
|
|
}[];
|
|
|
|
mainRouteActive: boolean;
|
|
|
|
onToggle(route: string): void;
|
|
|
|
onClose(): void;
|
|
|
|
}
|
|
|
|
|
|
|
|
function NavItem(props: NavItemProps) {
|
|
|
|
const router = useRouter();
|
|
|
|
const isCurrentPage =
|
|
|
|
router.pathname === props.route ||
|
|
|
|
(props.submenu != null &&
|
|
|
|
router.pathname.startsWith(getMainRoute(props.route)));
|
|
|
|
const isExternalLink =
|
2021-05-26 12:13:54 -04:00
|
|
|
props.route.includes("http://") || props.route.includes("https://");
|
2021-07-07 18:13:39 -04:00
|
|
|
|
|
|
|
function handleClick() {
|
|
|
|
if (document.activeElement instanceof HTMLElement) {
|
|
|
|
document.activeElement.blur();
|
|
|
|
}
|
|
|
|
props.onClose();
|
|
|
|
}
|
|
|
|
|
2021-05-18 03:16:32 -04:00
|
|
|
return (
|
|
|
|
<>
|
2021-07-07 18:13:39 -04:00
|
|
|
{isExternalLink ? (
|
2021-05-18 03:16:32 -04:00
|
|
|
<a
|
2021-05-26 12:13:54 -04:00
|
|
|
href={props.route}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2021-07-07 18:13:39 -04:00
|
|
|
onClick={handleClick}
|
2021-05-18 03:16:32 -04:00
|
|
|
>
|
|
|
|
{props.name}
|
|
|
|
</a>
|
2021-05-26 12:13:54 -04:00
|
|
|
) : (
|
|
|
|
<Link href={props.route}>
|
|
|
|
<a
|
|
|
|
title={props.name}
|
2021-07-07 18:13:39 -04:00
|
|
|
className={isCurrentPage ? styles.currentPage : ""}
|
|
|
|
onClick={handleClick}
|
2021-05-26 12:13:54 -04:00
|
|
|
>
|
|
|
|
{props.name}
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
)}
|
2021-05-18 03:16:32 -04:00
|
|
|
{(props.submenu?.length ?? 0) > 0 ? (
|
2021-07-07 18:13:39 -04:00
|
|
|
<>
|
|
|
|
<button
|
|
|
|
className={
|
|
|
|
props.mainRouteActive
|
|
|
|
? `${styles.dropdownIcon} ${styles.rotate}`
|
|
|
|
: styles.dropdownIcon
|
|
|
|
}
|
|
|
|
onClick={() => props.onToggle(props.route)}
|
|
|
|
>
|
|
|
|
<Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
|
|
|
|
</button>
|
|
|
|
<ul
|
|
|
|
className={
|
|
|
|
props.mainRouteActive
|
|
|
|
? `${styles.dropdown} ${styles.show}`
|
|
|
|
: styles.dropdown
|
|
|
|
}
|
|
|
|
>
|
|
|
|
{props.submenu?.map((item) => {
|
|
|
|
return (
|
|
|
|
<li className={styles.itemWrapper} key={item.name}>
|
|
|
|
<NavItem
|
|
|
|
name={item.name}
|
|
|
|
route={item.route}
|
|
|
|
mainRouteActive={props.mainRouteActive}
|
|
|
|
onClose={() => props.onClose()}
|
|
|
|
onToggle={(route) => props.onToggle(route)}
|
|
|
|
/>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</ul>
|
|
|
|
</>
|
2021-05-18 03:16:32 -04:00
|
|
|
) : null}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-07-07 18:13:39 -04:00
|
|
|
function getMainRoute(route: string) {
|
|
|
|
if (route === "/") {
|
|
|
|
return "/";
|
|
|
|
} else if (route.startsWith("http://") || route.startsWith("https://")) {
|
|
|
|
return route;
|
|
|
|
}
|
|
|
|
return "/" + route.split("/")[1];
|
2021-05-18 03:16:32 -04:00
|
|
|
}
|