From 773cba683828609f7dfbbfc63e087a7e1371fd8c Mon Sep 17 00:00:00 2001
From: Amy <minds10@hotmail.com>
Date: Wed, 16 Jun 2021 19:16:22 -0400
Subject: [PATCH] Add mobile navbar functionality

---
 components/Navbar.tsx | 86 +++++++++++++++++++++++++++++++++----------
 1 file changed, 67 insertions(+), 19 deletions(-)

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 5d2a5f60..40d8fcbe 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Image } from "./Image";
@@ -13,6 +13,16 @@ interface NavLink {
   }[];
 }
 
+interface NavItemProps {
+  name: string;
+  route: string;
+  submenu?: {
+    name: string;
+    route: string;
+  }[];
+  closeMenu: () => void;
+}
+
 const menu: NavLink[] = [
   {
     name: "Home",
@@ -72,10 +82,19 @@ const menu: NavLink[] = [
   },
 ];
 
-function NavItem(props: NavLink) {
+function NavItem(props: NavItemProps) {
   const router = useRouter();
   const externalLink =
     props.route.includes("http://") || props.route.includes("https://");
+  const [mobileDropdownOpen, setMobileDropdownOpen] = useState(false);
+
+  function handleClick() {
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+    props.closeMenu();
+  }
+
   return (
     <>
       {externalLink ? (
@@ -83,11 +102,7 @@ function NavItem(props: NavLink) {
           href={props.route}
           target="_blank"
           rel="noopener noreferrer"
-          onClick={() => {
-            if (document.activeElement instanceof HTMLElement) {
-              document.activeElement.blur();
-            }
-          }}
+          onClick={handleClick}
         >
           {props.name}
         </a>
@@ -102,11 +117,7 @@ function NavItem(props: NavLink) {
                 ? styles.currentPage
                 : ""
             }
-            onClick={() => {
-              if (document.activeElement instanceof HTMLElement) {
-                document.activeElement.blur();
-              }
-            }}
+            onClick={handleClick}
           >
             {props.name}
           </a>
@@ -114,14 +125,31 @@ function NavItem(props: NavLink) {
       )}
       {(props.submenu?.length ?? 0) > 0 ? (
         <>
-          <button className={`${styles.dropdownIcon} ${styles.rotate}`}>
+          <button
+            className={
+              mobileDropdownOpen
+                ? `${styles.dropdownIcon} ${styles.rotate}`
+                : styles.dropdownIcon
+            }
+            onClick={() => setMobileDropdownOpen(!mobileDropdownOpen)}
+          >
             <Image src="/images/dropdown-icon.svg" alt="Dropdown Icon" />
           </button>
-          <ul className={`${styles.dropdown} ${styles.show}`}>
+          <ul
+            className={
+              mobileDropdownOpen
+                ? `${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} />
+                  <NavItem
+                    name={item.name}
+                    route={item.route}
+                    closeMenu={props.closeMenu}
+                  />
                 </li>
               );
             })}
@@ -133,6 +161,7 @@ function NavItem(props: NavLink) {
 }
 
 export function Navbar() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   return (
     <nav className={styles.navbar}>
       <div className={styles.navContent}>
@@ -141,13 +170,29 @@ export function Navbar() {
             <Image src="/images/logo-icon.svg" alt="CSC Logo" />
           </a>
         </Link>
-        <button className={styles.hamburger}>
+        <button
+          className={styles.hamburger}
+          onClick={() => setMobileMenuOpen(true)}
+        >
           <Image src="/images/hamburger.svg" alt="Menu" />
         </button>
-        <div className={`${styles.navMobileBackground} ${styles.show}`}>
-          <div className={styles.navMenuWrapper}>
+        <div
+          className={
+            mobileMenuOpen
+              ? `${styles.navMobileBackground} ${styles.show}`
+              : styles.navMobileBackground
+          }
+          onClick={() => setMobileMenuOpen(false)}
+        >
+          <div
+            className={styles.navMenuWrapper}
+            onClick={(e) => e.stopPropagation()}
+          >
             <Link href="/">
-              <a className={styles.logoMobile}>
+              <a
+                className={styles.logoMobile}
+                onClick={() => setMobileMenuOpen(false)}
+              >
                 <Image src="/images/logo-icon.svg" alt="CSC Logo" />
               </a>
             </Link>
@@ -159,6 +204,9 @@ export function Navbar() {
                       name={item.name}
                       route={item.route}
                       submenu={item.submenu}
+                      closeMenu={() => {
+                        setMobileMenuOpen(false);
+                      }}
                     />
                   </li>
                 );