Merge pull request #38 from Junior-Caucus-SU/mobile_nav

add basic mobile nav
Junior-Caucus-SU · Jan 25, 2024 · 50c5c3f · 50c5c3f
2 parents 3d94ab1 + e78bac6
commit 50c5c3f
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 27 deletions.
diff --git a/src/components/NonPage/Nav.css b/src/components/NonPage/Nav.css
@@ -1,5 +1,5 @@
 .head-nav {
-  z-index:1000000;
+  z-index: 1000000;
 }
 
 .nav-container {
@@ -44,14 +44,13 @@
   font-weight: 500;
   line-height: normal;
   list-style: none;
-  width:auto;
+  width: auto;
 }
 
 .nav-menu-item:hover {
   transform: scale(1.05);
 }
 
-
 .juni-logo-container {
   display: flex;
   align-items: center;
@@ -62,28 +61,57 @@
   display: flex;
 }
 
-.item-menu-text {
-  text-align:center;
-}
-
-.hamburger {
+.mobile-dropdown {
   display: none;
 }
 
-@media (max-width: 768px) {
-  .hamburger {
-    display:block;
-  }
+
+@media (max-width: 795px) {
   .menu {
-    flex-direction:column;
+    display: none;
   }
-  .show-menu {
-    display:flex;
-    position:relative;
-    margin-right: 0;
-    padding-right:0;
+  .mobile-dropdown {
+    display: inline-block;
+    z-index: 1000;
   }
-  .hide-menu {
+
+  .dropdown-content {
     display:none;
+    position: fixed;
+    background-color: #f1f1f1;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1000;
+  }
+
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    z-index: 1000;
+  }
+  .dropdown-content a:active {
+    background-color: #ddd;
+  }
+
+  .mobile-dropdown:active .dropdown-content {
+    display: inline-block;
+  }
+
+
+  .toggle-menu {
+    display:inline-block;
+  }
+
+  /* Change the background color of the dropdown button when the dropdown content is shown */
+  /* .movile-dropdown:active .dropbtn {
+    background-color: #3e8e41;
+  }  */
+
+  .show {
+    display:inline-block;
   }
-}
+
+
+}
diff --git a/src/components/NonPage/NavBar.jsx b/src/components/NonPage/NavBar.jsx
@@ -1,36 +1,62 @@
 import React from 'react';
 import './Nav.css';
 import JuniorLogo from "../../Images/JuniorCaucusLogo.svg";
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Banner from './Banner';
 
 function NavBar(props) {
     const [menuOpen, setMenuOpen] = useState(false);
-
+    
     const toggleMenu = () => {
         setMenuOpen(!menuOpen);
     }
 
+
+
+    useEffect(() => {
+        const hideMenu = () => {
+            if (window.innerWidth > 768 && menuOpen) {
+                toggleMenu();
+            }
+        }
+        window.addEventListener('resize', hideMenu);
+
+        return () => {
+            window.removeEventListener('resize', hideMenu);
+        }
+    }, [])
+
     return (<div className='head-nav'>
         <Banner />
-        <div className="nav-container">
-            <div className="juni-logo-container">
+        <div className="nav-container" >
+            <div className="juni-logo-container" >
                 <a href="/">
                     <img src={JuniorLogo} alt="Logo" className='junior-logo nav-menu-item' />
                 </a>
             </div>
-            <div className={`menu ${menuOpen ? "show-menu" : "hide-menu"}`}>
+            <div className="menu">
                 <a href="/" className={currPageGet(props.page, "Home")}>{getText(props.page, "Home")}</a>
                 <a href="/people" className={currPageGet(props.page, "People")}>{getText(props.page, "People")}</a>
                 <a href="/events" className={currPageGet(props.page, "Events")}  >{getText(props.page, "Events")}</a>
                 <a href="/resources" className={currPageGet(props.page, "Resources")} >{getText(props.page, "Resources")}</a>
                 <a href="/Socials" className={currPageGet(props.page, "Socials")} >{getText(props.page, "Socials")}</a>
             </div>
 
-            <div class="nav-menu-item hamburger" onClick={toggleMenu}>
-                <span className="decorative">b</span> Menu <span className="decorative">a</span>
+            <div className={`nav-menu-item mobile-dropdown`}>
+                <div className="dropbtn" onClick={toggleMenu}>
+                    <span className="decorative">b</span> Menu <span className="decorative">a</span>
+                </div>
+                <div className={`dropdown-content ${menuOpen ? "show" : ""}`}>
+                    <a href="/" className={currPageGet(props.page, "Home")}>{getText(props.page, "Home")}</a>
+                    <a href="/people" className={currPageGet(props.page, "People")}>{getText(props.page, "People")}</a>
+                    <a href="/events" className={currPageGet(props.page, "Events")}  >{getText(props.page, "Events")}</a>
+                    <a href="/resources" className={currPageGet(props.page, "Resources")} >{getText(props.page, "Resources")}</a>
+                    <a href="/Socials" className={currPageGet(props.page, "Socials")} >{getText(props.page, "Socials")}</a>
+                </div>
+
             </div>
         </div>
+
     </ div>)
 }