126 lines
2.6 KiB
TypeScript
126 lines
2.6 KiB
TypeScript
|
import React from "react";
|
||
|
import Image from "next/image";
|
||
|
import Link from "next/link";
|
||
|
import { useRouter } from "next/router";
|
||
|
import styles from "./Navbar.module.css";
|
||
|
|
||
|
interface NavLink {
|
||
|
name: string;
|
||
|
route: string;
|
||
|
submenu?: {
|
||
|
name: string;
|
||
|
route: string;
|
||
|
}[];
|
||
|
}
|
||
|
|
||
|
const menu: NavLink[] = [
|
||
|
{
|
||
|
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",
|
||
|
},
|
||
|
],
|
||
|
},
|
||
|
{
|
||
|
name: "Get Involved",
|
||
|
route: "/get-involved",
|
||
|
},
|
||
|
{
|
||
|
name: "Events",
|
||
|
route: "/events",
|
||
|
},
|
||
|
{
|
||
|
name: "Resources",
|
||
|
route: "/resources",
|
||
|
},
|
||
|
];
|
||
|
|
||
|
function NavItem(props: NavLink) {
|
||
|
const router = useRouter();
|
||
|
return (
|
||
|
<>
|
||
|
<Link href={props.route}>
|
||
|
<a
|
||
|
title={props.name}
|
||
|
className={
|
||
|
router.pathname === props.route ||
|
||
|
((props.submenu?.length ?? 0) > 0 &&
|
||
|
router.pathname.startsWith(props.route))
|
||
|
? styles.currentPage
|
||
|
: ""
|
||
|
}
|
||
|
onClick={() => {
|
||
|
if (document.activeElement instanceof HTMLElement) {
|
||
|
document.activeElement.blur();
|
||
|
}
|
||
|
}}
|
||
|
>
|
||
|
{props.name}
|
||
|
</a>
|
||
|
</Link>
|
||
|
{(props.submenu?.length ?? 0) > 0 ? (
|
||
|
<ul className={styles.dropdown}>
|
||
|
{props.submenu?.map((item) => {
|
||
|
return (
|
||
|
<li className={styles.dropdownWrapper} key={item.name}>
|
||
|
<NavItem name={item.name} route={item.route} />
|
||
|
</li>
|
||
|
);
|
||
|
})}
|
||
|
</ul>
|
||
|
) : null}
|
||
|
</>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
export function Navbar() {
|
||
|
return (
|
||
|
<nav className={styles.navbar}>
|
||
|
<div className={styles.navContent}>
|
||
|
<Link href="/">
|
||
|
<a className={styles.logo}>
|
||
|
<Image
|
||
|
src="/images/logo-icon.png"
|
||
|
width={96}
|
||
|
height={42}
|
||
|
alt="CSC Logo"
|
||
|
/>
|
||
|
</a>
|
||
|
</Link>
|
||
|
<ul className={styles.navMenu}>
|
||
|
{menu.map((item) => {
|
||
|
return (
|
||
|
<li className={styles.dropdownWrapper} key={item.name}>
|
||
|
<NavItem
|
||
|
name={item.name}
|
||
|
route={item.route}
|
||
|
submenu={item.submenu}
|
||
|
/>
|
||
|
</li>
|
||
|
);
|
||
|
})}
|
||
|
</ul>
|
||
|
</div>
|
||
|
</nav>
|
||
|
);
|
||
|
}
|