Mobile NavBar Hamburger Menu (IllinoisWCS#282)

* mobile navbar added

* Working mobile navbad

src/components/NavBarMobile.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import styles from "@/styles/NavbarMobile.module.css";
+
+export default function NavBarMobile({}) {
+    const router = useRouter();
+
+    return (
+        <div className={styles.hamburger}>
+            <NavLink className={styles.burger} href="https://points.illinoiswcs.org/" label="points" />
+            <NavLink className={styles.burger} href="/officers" label="officers" />
+            <NavLink className={styles.burger} href="/committees" label="committees" />
+            <NavLink className={styles.burger} href="/resources" label="resources" />
+        </div>
+    )
+    function NavLink({ href, label }) {
+        const isActive = router.pathname === href;
+
+        return (
+        <Link href={href}>
+            <h3 className={`${isActive ? styles.activeLink : ""}`}>{label}</h3>
+        </Link>
+        );
+    }
+}

src/components/navbar.js

@@ -1,26 +1,54 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import styles from "@/styles/Navbar.module.css";
+import NavBarMobile from "./NavBarMobile";
+import { Navbar } from "react-bootstrap";
 
 export default function WCSNavbar() {
   const router = useRouter();
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  const closeMenuOnResize = () => {
+    setIsMenuOpen(false);
+  };
+
+  const handleLinkClick = () => {
+    setIsMenuOpen(false); // Close the dropdown menu when link is clicked
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", closeMenuOnResize);
+    return () => {
+      window.removeEventListener("resize", closeMenuOnResize);
+    };
+  }, []);
 
   return (
     <div className={styles.container}>
-      <Link href="/">
-        <img
-          src="https://points.illinoiswcs.org/assets/logo-9d49d730.png"
-          width="140"
-        />
-      </Link>
-      <div className={styles.linksContainer}>
-        <NavLink href="https://points.illinoiswcs.org/" label="points" />
-        <NavLink href="/officers" label="officers" />
-        <NavLink href="/committees" label="committees" />
-        <NavLink href="/resources" label="resources" />
+        <Link className={styles.logo} href="/">
+          <img
+            src="https://points.illinoiswcs.org/assets/logo-9d49d730.png"
+            width="140"
+          />
+        </Link>
+        <div className={`${styles.linksContainer} ${isMenuOpen ? styles.show : ''}`}>
+          <NavLink href="https://points.illinoiswcs.org/" label="points" />
+          <NavLink href="/officers" label="officers" />
+          <NavLink href="/committees" label="committees" />
+          <NavLink href="/resources" label="resources" />
+        </div>
+        <div className={styles.hamburger} onClick={toggleMenu}>
+          <div className={`${styles.bar} ${isMenuOpen ? styles.open1 : ''}`}></div>
+          <div className={`${styles.bar} ${isMenuOpen ? styles.open2 : ''}`}></div>
+          <div className={`${styles.bar} ${isMenuOpen ? styles.open3 : ''}`}></div>
+        </div>
+        {isMenuOpen && <NavBarMobile />}
       </div>
-    </div>
   );
 
   function NavLink({ href, label }) {

src/styles/Navbar.module.css

@@ -7,8 +7,12 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  padding: 15px 25px 15px 25px;
   gap: 2rem;
+  width: 100%;
+}
+
+.logo {
+  padding: 15px 25px 15px 25px;
 }
 
 .linksContainer {
@@ -17,13 +21,56 @@
   justify-content: space-between;
   gap: 4rem;
   padding-right: 50px;
+  padding: 15px 25px 15px 25px;
 }
 
 .linksContainer h3:hover {
   color: black;
   opacity: 0.7;
 }
 
+.hamburger {
+  display: none; /* Initially hidden */
+  cursor: pointer;
+  padding: 15px 25px 15px 25px;
+}
+
+.bar {
+  width: 25px;
+  height: 3px;
+  background-color: #21636c;
+  margin: 5px 0;
+  border-radius: 10px;
+  transition: transform 0.3s ease-in-out;
+}
+
+.open1 {
+  transform: rotate(45deg) translate(8px, 3px);
+}
+
+.open2 {
+  opacity: 0;
+}
+
+.open3 {
+  transform: rotate(-45deg) translate(8px, -3px);
+}
+
+.show {
+  display: flex; /* Show the links when menu is open */
+}
+
+@media (max-width: 1000px) {
+  .linksContainer {
+    display: none; /* Hide links in mobile view */
+    position: absolute;
+  }
+
+  .hamburger {
+    display: block; /* Show hamburger menu */
+  }
+}
+
 .activeLink {
   text-decoration: underline;
 }

src/styles/NavbarMobile.module.css

@@ -0,0 +1,12 @@
+.hamburger {
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+    top: 76.66px;
+    background-image: linear-gradient(
+        rgba(253, 176, 218, 1),
+        rgba(255, 143, 205, 1)
+    );
+    padding-left: 30px;
+    padding-bottom: 10px;
+}