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(false); + + const innerContainerClassName = classNames({ + [css.innerContainer]: true, + [css.innerContainerMobileNav]: showMobileNav, + }); + useScrollToTopOnNavigate(); const onPrivacy = useRouteMatch({ path: '/privacy' }); const onTerms = useRouteMatch({ path: '/terms' }); @@ -86,13 +95,29 @@ footer = null; } + const mobileNav = React.useMemo(() => { + if (onQR) { + return null; + } + + return ( + + ); + }, [onQR, showMobileNav, setShowMobileNav]); + return (
-
+
{header} - {activePage} - {footer} - {modals} +
+ {mobileNav} + {activePage} + {footer} + {modals} +
); 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, +}; + +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 ( -