Mobile nav dropdown fixes and committee images (#302)

* fixed navbar staying when link changes * fix mobile nav dropdown push content * also fix committee images not showing up on mobile
IllinoisWCS · Sep 9, 2024 · 0c1971e · 0c1971e
1 parent 64e60aa
commit 0c1971e
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 55 deletions.
diff --git a/src/sections/Navbar.js b/src/sections/Navbar.js
@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 
 import NavbarMobile from './NavbarMobile';
-// import {Navbar} from 'react-bootstrap';
+
 import styles from '@/styles/sections/Navbar.module.css';
 
 function NavLink({ href, label }) {
@@ -21,6 +21,8 @@ function NavLink({ href, label }) {
 
 export default function WCSNavbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const router = useRouter();
+  const { pathname } = router;
 
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
@@ -41,6 +43,10 @@ export default function WCSNavbar() {
     };
   }, []);
 
+  useEffect(() => {
+    setIsMenuOpen(false);
+  }, [pathname]);
+
   return (
     <div className={styles.container}>
       <Link className={styles.logo} href="/">
@@ -53,18 +59,15 @@ export default function WCSNavbar() {
         <NavLink
           href="https://points.illinoiswcs.org/"
           label="points"
-          onClick={handleLinkClick}
         />
         <NavLink href="/officers" label="officers" onClick={handleLinkClick} />
         <NavLink
           href="/committees"
           label="committees"
-          onClick={handleLinkClick}
         />
         <NavLink
           href="/resources"
           label="resources"
-          onClick={handleLinkClick}
         />
       </div>
 
@@ -74,7 +77,12 @@ export default function WCSNavbar() {
         <div className={`${styles.bar} ${isMenuOpen ? styles.open3 : ''}`} />
       </button>
 
-      {isMenuOpen && <NavbarMobile />}
+      {isMenuOpen
+      && (
+        <NavbarMobile
+          handleLinkClick={handleLinkClick}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/sections/NavbarMobile.js b/src/sections/NavbarMobile.js
@@ -1,5 +1,3 @@
-import React, { useState } from 'react';
-
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 
@@ -16,41 +14,33 @@ function NavLink({ href, label }) {
   );
 }
 
-export default function NavbarMobile() {
-  const [isMenuOpen, setIsMenuOpen] = useState(true);
-
-  const handleLinkClick = () => {
-    setIsMenuOpen(false); // Close the dropdown menu when link is clicked
-  };
-
+export default function NavbarMobile({ handleLinkClick }) {
   return (
-    isMenuOpen && (
-      <div className={styles.hamburger}>
-        <NavLink
-          className={styles.burger}
-          href="https://points.illinoiswcs.org/"
-          label="points"
-          onClick={handleLinkClick}
-        />
-        <NavLink
-          className={styles.burger}
-          href="/officers"
-          label="officers"
-          onClick={handleLinkClick}
-        />
-        <NavLink
-          className={styles.burger}
-          href="/committees"
-          label="committees"
-          onClick={handleLinkClick}
-        />
-        <NavLink
-          className={styles.burger}
-          href="/resources"
-          label="resources"
-          onClick={handleLinkClick}
-        />
-      </div>
-    )
+    <div className={styles.hamburger}>
+      <NavLink
+        className={styles.burger}
+        href="https://points.illinoiswcs.org/"
+        label="points"
+        onClick={handleLinkClick}
+      />
+      <NavLink
+        className={styles.burger}
+        href="/officers"
+        label="officers"
+        onClick={handleLinkClick}
+      />
+      <NavLink
+        className={styles.burger}
+        href="/committees"
+        label="committees"
+        onClick={handleLinkClick}
+      />
+      <NavLink
+        className={styles.burger}
+        href="/resources"
+        label="resources"
+        onClick={handleLinkClick}
+      />
+    </div>
   );
 }
diff --git a/src/styles/sections/CommitteesSection.module.css b/src/styles/sections/CommitteesSection.module.css
@@ -52,6 +52,7 @@
 .mobileImage {
   display: none;
   flex: 0;
+  height: auto;
 }
 
 @media (max-width: 875px) {
@@ -96,7 +97,7 @@
 
 .window {
   flex: 1;
-  width:;
+  width: auto;
 }
 
 .windowImage {

diff --git a/src/styles/sections/Navbar.module.css b/src/styles/sections/Navbar.module.css
@@ -1,14 +1,16 @@
 .container {
   background-image: linear-gradient(
+    to bottom,
     rgba(255, 143, 205, 1),
     rgba(253, 176, 218, 1)
   );
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 2rem;
   width: 100%;
+  float: top;
 }
 
 .logo {
@@ -22,6 +24,7 @@
   gap: 4rem;
   padding-right: 50px;
   padding: 15px 25px 15px 25px;
+  position: relative;
 }
 
 .linksContainer h3:hover {
@@ -30,7 +33,7 @@
 }
 
 .hamburger {
-  display: none; /* Initially hidden */
+  display: none; 
   cursor: pointer;
   padding: 15px 25px 15px 25px;
   background-color: transparent;
@@ -59,20 +62,24 @@
 }
 
 .show {
-  display: flex; /* Show the links when menu is open */
+  display: flex;
 }
 
 @media (max-width: 1000px) {
   .linksContainer {
-    display: none; /* Hide links in mobile view */
+    display: none; 
     position: absolute;
   }
 
   .hamburger {
-    display: block; /* Show hamburger menu */
+    display: block; 
   }
 }
 
+.navBarSticky {
+  position: static;
+}
+
 .activeLink {
   text-decoration: underline;
 }

diff --git a/src/styles/sections/NavbarMobile.module.css b/src/styles/sections/NavbarMobile.module.css
@@ -1,12 +1,7 @@
 .hamburger {
-  position: absolute;
+  position: static;
   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;
+  padding-bottom: 20px;
 }