diff --git a/landing/header.css b/landing/header.css --- a/landing/header.css +++ b/landing/header.css @@ -116,6 +116,7 @@ } } +/* max-width should be kept in sync with HEADER_BREAKPOINT in header.react */ @media screen and (max-width: 848px) { .pageNav { display: none; @@ -144,6 +145,7 @@ } } +/* This value should be kept in sync with HEADER_BREAKPOINT in header.react */ @media screen and (max-width: 848px) and (hover: hover) { div.menuIcon:hover { cursor: pointer; diff --git a/landing/header.react.js b/landing/header.react.js --- a/landing/header.react.js +++ b/landing/header.react.js @@ -16,6 +16,10 @@ import css from './header.css'; import typography from './typography.css'; +// This value comes from the breakpoint value in header.css. Please make sure +// that this value is in sync with header.css if ever changed +export const HEADER_BREAKPOINT = 848; // px + type Props = { +showMobileNav: boolean, +setShowMobileNav: SetState, diff --git a/landing/landing.react.js b/landing/landing.react.js --- a/landing/landing.react.js +++ b/landing/landing.react.js @@ -11,7 +11,7 @@ import AppLanding from './app-landing.react.js'; import Footer from './footer.react.js'; -import Header from './header.react.js'; +import Header, { HEADER_BREAKPOINT } from './header.react.js'; import Investors from './investors.react.js'; import Keyservers from './keyservers.react.js'; import css from './landing.css'; @@ -51,6 +51,19 @@ const [showMobileNav, setShowMobileNav] = React.useState(false); + React.useEffect(() => { + const handleResize = () => { + if (window.innerWidth > HEADER_BREAKPOINT && showMobileNav) { + setShowMobileNav(false); + } + }; + + window.addEventListener('resize', handleResize); + return () => { + window.removeEventListener('resize', handleResize); + }; + }, [showMobileNav, setShowMobileNav]); + const innerContainerClassName = classNames({ [css.innerContainer]: true, [css.innerContainerMobileNav]: showMobileNav,