diff --git a/components/Navbar.module.css b/components/Navbar.module.css new file mode 100644 index 00000000..9aa5b04b --- /dev/null +++ b/components/Navbar.module.css @@ -0,0 +1,147 @@ +.navbar { + display: flex; + justify-content: center; + align-items: center; + + background-color: var(--white); +} + +.navContent { + display: flex; + flex-direction: row; + flex-wrap: none; + justify-content: space-between; + align-items: center; + + width: stretch; + max-width: 1440px; + height: auto; + padding: 1.75rem 8.5rem; +} + +.logo { + display: flex; + justify-content: center; + align-items: center; +} + +.logo:hover { + cursor: pointer; +} + +.navMenu { + display: inline-flex; + flex-direction: row; + flex-wrap: none; + justify-content: space-between; + align-items: baseline; + + margin: 0; + padding: 0; + + width: 32rem; +} + +.navMenu li { + list-style: none; + text-align: center; +} + +.navMenu a { + color: var(--purple-2); + text-decoration: none; +} + +.navMenu a.currentPage { + color: var(--blue-2); +} + +.navMenu > li:hover > a { + color: var(--blue-2); + font-weight: 600; +} + +/* Prevents the menu items from shifting when made bold on hover */ +.navMenu > li > a::before { + display: block; + content: attr(title); + font-weight: 600; + height: 0; + overflow: hidden; + visibility: hidden; +} + +.navMenu > li > a { + padding: 1rem; +} + +.dropdownWrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} + +.dropdown { + visibility: visible; + + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + + position: absolute; + + margin: 0; + margin-top: 3rem; + padding: 0; + + border-radius: 0.5rem; + background-color: var(--white); + box-shadow: 0 0.5rem 1rem var(--blue-1-20); + + font-size: 0.875rem; +} + +.dropdown > li { + width: 100%; +} + +.dropdown > li > a { + padding: 0.5rem; + width: 100%; + box-sizing: border-box; +} + +.dropdown > li:hover > a, +.dropdown > li > a:focus { + background-color: var(--blue-1-20); +} + +.dropdown > li:first-child > a { + padding-top: 1rem; + border-radius: 0.5rem 0.5rem 0 0; +} + +.dropdown > li:last-child > a { + padding-bottom: 1rem; + border-radius: 0 0 0.5rem 0.5rem; +} + +.navMenu > li .dropdown { + visibility: hidden; +} + +.navMenu > li:hover .dropdown, +.navMenu > li:focus-within .dropdown { + visibility: visible; +} + +/* On a smaller desktop screen, keep the same navbar layout but decrease the + * horizontal padding so it still fits + */ +@media screen and (max-width: 960px) { + .navContent { + padding: 1.75rem 4rem; + } +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 00000000..19493239 --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,125 @@ +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 ( + <> + + 0 && + router.pathname.startsWith(props.route)) + ? styles.currentPage + : "" + } + onClick={() => { + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } + }} + > + {props.name} + + + {(props.submenu?.length ?? 0) > 0 ? ( + + ) : null} + + ); +} + +export function Navbar() { + return ( + + ); +} diff --git a/pages/_app.css b/pages/_app.css index dd661abc..9ed11d6d 100644 --- a/pages/_app.css +++ b/pages/_app.css @@ -8,11 +8,13 @@ code, pre { /* Default is light theme */ body { + --white: #ffffff; --off-white: #fdf8f5; --teal-1: #76ffdc; --teal-2: #4ed4b2; --blue-1: #5caff9; - --blue-2: #5caff9; + --blue-1-20: #5caff934; + --blue-2: #1482e3; --purple-1: #525284; --purple-2: #2a2a62; --gradient-blue-green: linear-gradient( @@ -20,14 +22,17 @@ body { #1481e3 -17.95%, #4ed4b2 172.82% ); + + margin: 0; } .dark { + --white: #ffffff; --off-white: #fdf8f5; --teal-1: #76ffdc; --teal-2: #4ed4b2; --blue-1: #5caff9; - --blue-2: #5caff9; + --blue-2: #1482e3; --purple-1: #525284; --purple-2: #2a2a62; --gradient-blue-green: linear-gradient( diff --git a/pages/_app.tsx b/pages/_app.tsx index ad331776..d85bd4f3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,6 +2,7 @@ import React from "react"; import { AppProps } from "next/app"; import { MDXProvider } from "@mdx-js/react"; import { ThemeProvider } from "../components/theme"; +import { Navbar } from "../components/Navbar"; import "./_app.css"; import "./font.css"; @@ -9,6 +10,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element { return ( + diff --git a/pages/about/code-of-conduct.mdx b/pages/about/code-of-conduct.mdx new file mode 100644 index 00000000..529e4fdb --- /dev/null +++ b/pages/about/code-of-conduct.mdx @@ -0,0 +1 @@ +# Code of Conduct page diff --git a/pages/about/constitution.mdx b/pages/about/constitution.mdx new file mode 100644 index 00000000..dd283c85 --- /dev/null +++ b/pages/about/constitution.mdx @@ -0,0 +1 @@ +# Constitution page diff --git a/pages/about/index.mdx b/pages/about/index.mdx new file mode 100644 index 00000000..abfeb232 --- /dev/null +++ b/pages/about/index.mdx @@ -0,0 +1 @@ +# About Us page diff --git a/pages/about/team.mdx b/pages/about/team.mdx new file mode 100644 index 00000000..707cf7c5 --- /dev/null +++ b/pages/about/team.mdx @@ -0,0 +1 @@ +# Meet the Team page diff --git a/pages/events.mdx b/pages/events.mdx new file mode 100644 index 00000000..0d6b3934 --- /dev/null +++ b/pages/events.mdx @@ -0,0 +1 @@ +# Events page diff --git a/pages/get-involved.mdx b/pages/get-involved.mdx new file mode 100644 index 00000000..da4c5a96 --- /dev/null +++ b/pages/get-involved.mdx @@ -0,0 +1 @@ +# Get Involved page diff --git a/pages/resources.mdx b/pages/resources.mdx new file mode 100644 index 00000000..29b953b0 --- /dev/null +++ b/pages/resources.mdx @@ -0,0 +1 @@ +# Resources page diff --git a/public/images/logo-icon.png b/public/images/logo-icon.png new file mode 100644 index 00000000..dc0b2b8d Binary files /dev/null and b/public/images/logo-icon.png differ