Changeset View
Changeset View
Standalone View
Standalone View
landing/landing.react.js
// @flow | // @flow | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { useRouteMatch } from 'react-router-dom'; | import { useRouteMatch } from 'react-router-dom'; | ||||
import { | import { | ||||
ModalProvider, | ModalProvider, | ||||
useModalContext, | useModalContext, | ||||
} from 'lib/components/modal-provider.react.js'; | } from 'lib/components/modal-provider.react.js'; | ||||
import AppLanding from './app-landing.react.js'; | import AppLanding from './app-landing.react.js'; | ||||
import Footer from './footer.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 Investors from './investors.react.js'; | ||||
import Keyservers from './keyservers.react.js'; | import Keyservers from './keyservers.react.js'; | ||||
import css from './landing.css'; | import css from './landing.css'; | ||||
import MobileNav from './mobile-nav.react.js'; | import MobileNav from './mobile-nav.react.js'; | ||||
import Privacy from './privacy.react.js'; | import Privacy from './privacy.react.js'; | ||||
import QR from './qr.react.js'; | import QR from './qr.react.js'; | ||||
import SIWE from './siwe.react.js'; | import SIWE from './siwe.react.js'; | ||||
import Support from './support.react.js'; | import Support from './support.react.js'; | ||||
Show All 23 Lines | () => | ||||
modalContext.modals.map(([modal, key]) => ( | modalContext.modals.map(([modal, key]) => ( | ||||
<React.Fragment key={key}>{modal}</React.Fragment> | <React.Fragment key={key}>{modal}</React.Fragment> | ||||
)), | )), | ||||
[modalContext.modals], | [modalContext.modals], | ||||
); | ); | ||||
const [showMobileNav, setShowMobileNav] = React.useState<boolean>(false); | 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({ | const innerContainerClassName = classNames({ | ||||
[css.innerContainer]: true, | [css.innerContainer]: true, | ||||
[css.innerContainerMobileNav]: showMobileNav, | [css.innerContainerMobileNav]: showMobileNav, | ||||
}); | }); | ||||
useScrollToTopOnNavigate(); | useScrollToTopOnNavigate(); | ||||
const onPrivacy = useRouteMatch({ path: '/privacy' }); | const onPrivacy = useRouteMatch({ path: '/privacy' }); | ||||
const onTerms = useRouteMatch({ path: '/terms' }); | const onTerms = useRouteMatch({ path: '/terms' }); | ||||
▲ Show 20 Lines • Show All 60 Lines • Show Last 20 Lines |