DIsmiss mobile Nav after clicking on menu item

NASA-IMPACT · Sep 2, 2024 · 78af36b · 78af36b
1 parent 8e5cbb2
commit 78af36b
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 33 deletions.
diff --git a/src/components/header.js b/src/components/header.js
@@ -5,10 +5,11 @@ import { Link } from "gatsby"
 
 import { colors, layout, breakpoints } from "../theme"
 import { CaseiLogoIcon, CloseIcon, HamburgerIcon } from "../icons"
-import { NEGATIVE } from "../utils/constants"
+import { NEGATIVE, POSITIVE } from "../utils/constants"
 import StickyBanner from "./sticky-banner"
 import Button from "./button"
 import NasaLogoIcon from "../icons/nasa-logo"
+import NavList from "./nav"
 
 const reveal = keyframes`
 0% {
@@ -173,18 +174,11 @@ const PageNavGlobalStyle = createGlobalStyle`
   }
 `
 
-const Header = ({ shortname, children, mode }) => {
-  const offsetCalculator = (scrollDirection, _, currentScroll) => {
-    if (scrollDirection === "scroll-down" && currentScroll > 250) {
-      return `-${document.getElementById("main-header").clientHeight}px`
-    } else {
-      return 0
-    }
-  }
-
+const Header = ({ shortname, mode }) => {
   const [navRevealed, setNavRevealed] = useState(false)
+
   return (
-    <StickyBanner offsetCalculator={offsetCalculator} navRevealed={navRevealed}>
+    <StickyBanner navRevealed={navRevealed}>
       <PageHeaderSelf id="main-header" mode={mode}>
         <PageHeaderInner>
           <PageHeadline>
@@ -225,7 +219,10 @@ const Header = ({ shortname, children, mode }) => {
             role="navigation"
             revealed={navRevealed}
           >
-            {children}
+            <NavList
+              mode={POSITIVE}
+              onLinkClick={() => setNavRevealed(false)}
+            />
           </PageNavWrapper>
         </PageHeaderInner>
       </PageHeaderSelf>

diff --git a/src/components/layout/layout.js b/src/components/layout/layout.js
@@ -17,7 +17,6 @@ import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css"
 import "../global.css"
 
 import Header from "../header"
-import Nav from "../nav"
 import Footer from "../footer"
 
 import { POSITIVE } from "../../utils/constants"
@@ -45,12 +44,8 @@ const Layout = ({ children }) => {
 
   return (
     <Container id="top" data-cy="page">
-      <Header shortname={data.site.siteMetadata.shortname} mode={POSITIVE}>
-        <Nav mode={POSITIVE} />
-      </Header>
-
+      <Header shortname={data.site.siteMetadata.shortname} mode={POSITIVE} />
       <main>{children}</main>
-
       <Footer shortname={data.site.siteMetadata.shortname} />
     </Container>
   )

diff --git a/src/components/nav.js b/src/components/nav.js
@@ -24,7 +24,7 @@ const GlobalMenu = styled.ul`
     flex-flow: row nowrap;
   }
 `
-const ListLink = ({ to, children, mode }) => (
+const ListLink = ({ to, children, mode, onClick }) => (
   <li
     css={`
       margin: 0;
@@ -47,6 +47,7 @@ const ListLink = ({ to, children, mode }) => (
         color: ${colors[mode].text};
       `}
       partiallyActive={true}
+      onClick={onClick}
     >
       {children}
     </Link>
@@ -71,24 +72,25 @@ ListLink.propTypes = {
   },
   children: PropTypes.string.isRequired,
   mode: PropTypes.oneOf([POSITIVE, NEGATIVE]),
+  onClick: PropTypes.func,
 }
 
-const NavList = ({ mode }) => {
+const NavList = ({ mode, onLinkClick }) => {
   return (
     <GlobalMenu>
-      <ListLink to="/explore/campaigns" mode={mode}>
+      <ListLink to="/explore/campaigns" mode={mode} onClick={onLinkClick}>
         Explore
       </ListLink>
-      <ListLink to="/glossary" mode={mode}>
+      <ListLink to="/glossary" mode={mode} onClick={onLinkClick}>
         Glossary
       </ListLink>
-      <ListLink to="/about" mode={mode}>
+      <ListLink to="/about" mode={mode} onClick={onLinkClick}>
         About
       </ListLink>
-      <ListLink to="/faq" mode={mode}>
+      <ListLink to="/faq" mode={mode} onClick={onLinkClick}>
         FAQS
       </ListLink>
-      <ListLink to="/contact" mode={mode}>
+      <ListLink to="/contact" mode={mode} onClick={onLinkClick}>
         Contact
       </ListLink>
     </GlobalMenu>
@@ -99,4 +101,5 @@ export default NavList
 
 NavList.propTypes = {
   mode: PropTypes.string.isRequired,
+  onLinkClick: PropTypes.func,
 }
diff --git a/src/components/sticky-banner.js b/src/components/sticky-banner.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react"
 import PropTypes from "prop-types"
 
-const StickyBanner = ({ children, offsetCalculator, navRevealed }) => {
+const StickyBanner = ({ children, navRevealed }) => {
   const scrollDown = "scroll-down"
   const scrollUp = "scroll-up"
   const [scrollDirection, setScrollDirection] = useState(null)
@@ -10,6 +10,14 @@ const StickyBanner = ({ children, offsetCalculator, navRevealed }) => {
   const [offset, setOffset] = useState(0)
   const node = React.createRef()
 
+  const offsetCalculator = (scrollDirection, _, currentScroll) => {
+    if (scrollDirection === "scroll-down" && currentScroll > 250) {
+      return `-${document.getElementById("main-header").clientHeight}px`
+    } else {
+      return 0
+    }
+  }
+
   useEffect(() => {
     if (startingPosition === null) {
       // set position on first load
@@ -41,12 +49,7 @@ const StickyBanner = ({ children, offsetCalculator, navRevealed }) => {
     }
     setLastScroll(currentScroll)
     setOffset(
-      offsetCalculator(
-        scrollDirection,
-        startingPosition,
-        currentScroll,
-        lastScroll
-      )
+      offsetCalculator(scrollDirection, startingPosition, currentScroll)
     )
   }
 
@@ -71,7 +74,6 @@ const StickyBanner = ({ children, offsetCalculator, navRevealed }) => {
 StickyBanner.propTypes = {
   children: PropTypes.element,
   hideAfter: PropTypes.number,
-  offsetCalculator: PropTypes.func,
   navRevealed: PropTypes.bool,
 }