Navigation bar update

components/Navbar.tsx

@@ -1,31 +1,86 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import React from 'react';
-import WordmarkLogo from '../public/acm-logo-wordmark-extended.png';
+import React, { useState } from 'react';
+
+import WordmarkLogo from '../public/acm_wordmark_chapter.svg';
 
 function Navbar(): JSX.Element {
+  // set states
+  const [menuActive, setMenuActive] = useState(false);
+
+  // switches mobile menu state
+  const menuActivate = () => {
+    setMenuActive(menuActive ? false : true);
+  };
+
   return (
-    <nav className="navbar">
-      <div className="navbar-brand">
-        <Link href="/">
-          <a className='force-child-display-block'>
-            <Image src={WordmarkLogo} width={106} height={40} alt="Open Source at ACM Home" />
+    <nav id="navbar">
+      <section id="nav-container">
+        <Link href="https://opensource.uclaacm.com/">
+          <a id="nav-title" className="nav-section left" aria-label="acm home">
+            <Image
+              src={WordmarkLogo}
+              width={180}
+              height={60}
+              alt="Open Source at ACM Home"
+            />
           </a>
         </Link>
-      </div>
-      <div className="navbar-items">
-        <div className="navbar-link">
-          <Link href="/projects">
-            <a>projects</a>
-          </Link>
-          <Link href="/contribute">
-            <a>contribute</a>
-          </Link>
-          <Link href="https://github.com/uclaacm" passHref>
-            <button>GitHub</button>
-          </Link>
-        </div>
-      </div>
+
+        <button
+          className={menuActive ? 'active' : ''}
+          id="hamburger"
+          type="button"
+          onClick={menuActivate}
+          aria-label="navigation menu"
+          aria-expanded={menuActive}
+          tabIndex={0}
+        >
+          <span className="bar" id="bar-one"></span>
+          <span className="bar" id="bar-two"></span>
+          <span className="bar" id="bar-three"></span>
+        </button>
+        <section className={menuActive ? 'active' : ''} id="menu-modal">
+          <ul
+            className={`nav-items ${menuActive ? 'active' : ''}`}
+            role="presentation"
+          >
+            <li>
+              <Link href="https://www.uclaacm.com/" passHref>
+                <button type="button" role="link" onClick={menuActivate}>
+                  ACM Website
+                </button>
+              </Link>
+            </li>
+            <li>
+              <Link href="/projects" passHref>
+                <button type="button" role="link" onClick={menuActivate}>
+                  Projects
+                </button>
+              </Link>
+            </li>
+            <li>
+              <Link href="/contribute" passHref>
+                <button type="button" role="link" onClick={menuActivate}>
+                  Contribute
+                </button>
+              </Link>
+            </li>
+            <li>
+              <Link href="https://github.com/uclaacm" passHref>
+                <button
+                  className="github"
+                  type="button"
+                  role="link"
+                  onClick={menuActivate}
+                >
+                  GITHUB
+                </button>
+              </Link>
+            </li>
+          </ul>
+        </section>
+      </section>
     </nav>
   );
 }

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

styles/globals.css

@@ -4,6 +4,7 @@ html,
 body {
   padding: 0;
   margin: 0;
+  margin-top: 70px;
 }
 
 * {
@@ -35,7 +36,7 @@ body {
 
 .assignee-image {
   border-radius: 50%;
-  overflow:  hidden;
+  overflow: hidden;
   width: 30px;
   height: 30px;
 }
@@ -52,12 +53,182 @@ body {
 }
 
 /* overriding the WestwoodCSS default */
-.navbar-link a {
-  padding-left: 1em !important;
+#navbar {
+  background: white;
+  box-shadow: 0 0 4px #e2e2e2;
+  color: #333;
+  font-family: 'Poppins', 'Helvetica Neue', 'Helvetica', sans-serif;
+  font-weight: 600;
+  height: 72px;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  text-transform: lowercase;
+  top: 0;
+  width: 100%;
+  z-index: 10;
+}
+
+#navbar #nav-container {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
 }
 
-.navbar-link > button {
-  margin-left: 1em;
+#navbar #nav-container #nav-title {
+  z-index: 12;
+  margin-top: 5px;
+}
+
+#navbar #nav-container #nav-title #acm-logo {
+  height: 60px;
+  margin-top: 05px;
+  width: 180px;
+}
+
+#navbar #nav-container #hamburger {
+  align-items: center;
+  background-color: transparent;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  display: none;
+  flex-direction: column;
+  height: 50px;
+  justify-content: center;
+  margin: 0 20px;
+  overflow: hidden;
+  position: relative;
+  width: 50px;
+  z-index: 12;
+  box-shadow: none;
+}
+
+#navbar #nav-container #hamburger .bar {
+  background-color: #595959;
+  border-radius: 04px;
+  height: 03px;
+  margin: 2px 0;
+  position: relative;
+  transition: all 0.5s ease-in-out;
+  width: 20px;
+}
+
+#navbar #nav-container #hamburger.active #bar-one {
+  transform: rotate(45deg) translate(5px, 4px);
+}
+
+#navbar #nav-container #hamburger.active #bar-two {
+  transform: translateX(-50px);
+}
+
+#navbar #nav-container #hamburger.active #bar-three {
+  transform: rotate(-45deg) translate(5px, -5px);
+}
+
+#navbar #nav-container #hamburger:hover .bar {
+  background-color: #1e6cff;
+}
+
+#navbar #nav-container .nav-items {
+  align-items: center;
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#navbar #nav-container .nav-items li {
+  line-height: 40px;
+  padding: 0px;
+}
+
+#navbar #nav-container .nav-items li button {
+  background-color: transparent;
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: 0.95em;
+  font-weight: 600;
+  text-transform: lowercase;
+  transition: 0.2s;
+  margin: 0;
+  box-shadow: none;
+  border-radius: 15px;
+}
+
+#navbar #nav-container .nav-items li button:hover {
+  color: #1e6cff;
+  cursor: pointer;
+}
+
+#navbar #nav-container .nav-items li .github {
+  border: 0.7mm solid;
+  color: #1e6cff;
+  text-transform: none;
+  margin: 0 15px;
+}
+
+#navbar #nav-container .nav-items li .github:hover {
+  background-color: #1e6cff;
+  color: white;
+  transition: none;
+}
+
+@media (max-width: 1160px) {
+  #navbar #nav-container #hamburger {
+    display: flex;
+  }
+
+  #navbar #menu-modal {
+    background: rgba(255, 255, 255, 0.95);
+    height: 100vh;
+    left: 50vw;
+    overflow-y: scroll;
+    position: absolute;
+    top: 50vh;
+    transform: translate(-50%, -150%);
+    transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98);
+    width: 100vw;
+    z-index: 11;
+  }
+
+  #navbar #menu-modal .nav-items {
+    display: none;
+    font-size: 1.8em;
+    font-weight: 600;
+    left: 50vw;
+    margin: 10px 0;
+    position: absolute;
+    top: 50vh;
+    transform: translate(-50%, -50%);
+  }
+
+  #navbar #menu-modal .nav-items .button {
+    padding: 0 20px;
+    white-space: nowrap;
+    border: #2b7489;
+  }
+  #navbar #menu-modal .nav-items .button :focus {
+    outline: none;
+  }
+
+  #navbar #menu-modal .nav-items li {
+    margin: 5px 0;
+  }
+
+  #navbar #menu-modal .nav-items.active {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+
+  #navbar #menu-modal.active {
+    transform: translate(-50%, -50%);
+    transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98);
+  }
 }
 
 .dev-language-badge {
@@ -72,27 +243,27 @@ body {
 }
 
 .dev-language-badge.lang-js {
-  background-color: #EFDF6A;
+  background-color: #efdf6a;
 }
 
 .dev-language-badge.lang-ts {
-  background-color: #2B7489;
+  background-color: #2b7489;
 }
 
 .dev-language-badge.lang-scss {
-  background-color: #C6538C;
+  background-color: #c6538c;
 }
 
 .dev-language-badge.lang-go {
-  background-color: #4AABD5;
+  background-color: #4aabd5;
 }
 
 .dev-language-badge.lang-html {
-  background-color: #D35A31;
+  background-color: #d35a31;
 }
 
 .dev-language-badge.lang-rust {
-  background-color: #DEA584;
+  background-color: #dea584;
 }
 
 .vertically-aligned-row {
@@ -118,7 +289,7 @@ body {
 }
 
 .gfi-title > h3 {
-  margin: 0
+  margin: 0;
 }
 
 .gfi-image {
@@ -127,12 +298,12 @@ body {
 }
 
 .gfi-button {
-  background-color: #1E6CFF;
+  background-color: #1e6cff;
   color: white;
 }
 
 .gfi-button-displayed {
-  color: #1E6CFF;
+  color: #1e6cff;
   background-color: rgb(244, 244, 244);
 }
 
@@ -149,4 +320,4 @@ dl * {
   font-weight: bold;
   color: black;
   font-size: 36px;
-}
+}