Page MenuHomePhabricator
Files F3405599

D7781.id26345.diff
No OneTemporary
Actions

D7781.id26345.diff
View Options

diff --git a/landing/landing.css b/landing/landing.css
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -18,6 +18,14 @@
overflow: auto;
}
+.innerContainerMobileNav {
+ overflow-y: hidden;
+}
+
+.pageContentContainer {
+ position: relative;
+}
+
.wrapper {
transition-property: max-width;
transition: 300ms;
diff --git a/landing/landing.react.js b/landing/landing.react.js
--- a/landing/landing.react.js
+++ b/landing/landing.react.js
@@ -1,5 +1,6 @@
// @flow
+import classNames from 'classnames';
import * as React from 'react';
import { useRouteMatch } from 'react-router-dom';
@@ -14,6 +15,7 @@
import Investors from './investors.react.js';
import Keyservers from './keyservers.react.js';
import css from './landing.css';
+import MobileNav from './mobile-nav.react.js';
import Privacy from './privacy.react.js';
import QR from './qr.react.js';
import SIWE from './siwe.react.js';
@@ -47,6 +49,13 @@
[modalContext.modals],
);
+ const [showMobileNav, setShowMobileNav] = React.useState<boolean>(false);
+
+ const innerContainerClassName = classNames({
+ [css.innerContainer]: true,
+ [css.innerContainerMobileNav]: showMobileNav,
+ });
+
useScrollToTopOnNavigate();
const onPrivacy = useRouteMatch({ path: '/privacy' });
const onTerms = useRouteMatch({ path: '/terms' });
@@ -76,6 +85,16 @@
}
}, [onKeyservers, onPrivacy, onSupport, onTerms, onTeam, onInvestors, onQR]);
+ const mobileNav = React.useMemo(
+ () => (
+ <MobileNav
+ showMobileNav={showMobileNav}
+ setShowMobileNav={setShowMobileNav}
+ />
+ ),
+ [showMobileNav, setShowMobileNav],
+ );
+
let header = <Header />;
if (onQR) {
header = null;
@@ -88,11 +107,14 @@
return (
<div className={css.container}>
- <div className={css.innerContainer}>
+ <div className={innerContainerClassName}>
{header}
- {activePage}
- {footer}
- {modals}
+ <div className={css.pageContentContainer}>
+ {mobileNav}
+ {activePage}
+ {footer}
+ {modals}
+ </div>
</div>
</div>
);
diff --git a/landing/mobile-nav.css b/landing/mobile-nav.css
--- a/landing/mobile-nav.css
+++ b/landing/mobile-nav.css
@@ -8,6 +8,14 @@
z-index: 1;
background-color: var(--comparison-cards);
padding: 8px 16px 0;
+ transition: 0.5s;
+ transition-property: top;
+}
+
+nav.activeMobileNav {
+ top: 0;
+ transition: 0.5s;
+ transition-property: top;
}
div.tabContainer {
diff --git a/landing/mobile-nav.react.js b/landing/mobile-nav.react.js
--- a/landing/mobile-nav.react.js
+++ b/landing/mobile-nav.react.js
@@ -6,14 +6,32 @@
import * as React from 'react';
import { NavLink } from 'react-router-dom';
+import type { SetState } from 'lib/types/hook-types.js';
+
import css from './mobile-nav.css';
import typography from './typography.css';
-function MobileNav(): React.Node {
+type Props = {
+ showMobileNav: boolean,
+ setShowMobileNav: SetState<boolean>,
+};
+
+function MobileNav(props: Props): React.Node {
+ const { showMobileNav, setShowMobileNav } = props;
+
const navLinkClassName = classNames([typography.paragraph2, css.tab]);
+ const mobileNavClassName = classNames({
+ [css.mobileNav]: true,
+ [css.activeMobileNav]: showMobileNav,
+ });
+
+ const onClickTab = React.useCallback(() => {
+ setShowMobileNav(false);
+ }, [setShowMobileNav]);
+
return (
- <nav className={css.mobileNav}>
+ <nav className={mobileNavClassName}>
<div className={css.tabContainer}>
<NavLink
to="/keyservers"
@@ -21,7 +39,9 @@
className={navLinkClassName}
activeClassName={css.activeTab}
>
- <div className={css.tabContent}>Keyserver</div>
+ <div onClick={onClickTab} className={css.tabContent}>
+ Keyserver
+ </div>
</NavLink>
</div>
<div className={css.tabContainer}>
@@ -31,7 +51,9 @@
className={navLinkClassName}
activeClassName={css.activeTab}
>
- <div className={css.tabContent}>Team</div>
+ <div onClick={onClickTab} className={css.tabContent}>
+ Team
+ </div>
</NavLink>
</div>
<div className={css.tabContainer}>
@@ -41,7 +63,9 @@
className={navLinkClassName}
activeClassName={css.activeTab}
>
- <div className={css.tabContent}>Investors</div>
+ <div onClick={onClickTab} className={css.tabContent}>
+ Investors
+ </div>
</NavLink>
</div>
<div className={css.socialIconsContainer}>

File Metadata

Mime Type
text/plain
Expires
Wed, Dec 4, 10:16 PM (7 h, 57 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2614944
Default Alt Text
D7781.id26345.diff (4 KB)

Event Timeline