Page MenuHomePhabricator
Files F3407292

D7870.diff
No OneTemporary
Actions

D7870.diff
View Options

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 @@
}
}
+/* max-width 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<boolean>,
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,23 @@
const [showMobileNav, setShowMobileNav] = React.useState<boolean>(false);
+ const handleResize = React.useCallback(() => {
+ if (window.innerWidth > HEADER_BREAKPOINT) {
+ setShowMobileNav(false);
+ }
+ }, [setShowMobileNav]);
+
+ React.useEffect(() => {
+ if (!showMobileNav) {
+ return undefined;
+ }
+
+ window.addEventListener('resize', handleResize);
+ return () => {
+ window.removeEventListener('resize', handleResize);
+ };
+ }, [handleResize, showMobileNav]);
+
const innerContainerClassName = classNames({
[css.innerContainer]: true,
[css.innerContainerMobileNav]: showMobileNav,

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 5:32 AM (15 h, 28 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2615364
Default Alt Text
D7870.diff (2 KB)

Event Timeline