diff --git a/landing/mobile-nav.css b/landing/mobile-nav.css new file mode 100644 --- /dev/null +++ b/landing/mobile-nav.css @@ -0,0 +1,44 @@ +nav.mobileNav { + position: absolute; + top: -110vh; + bottom: auto; + left: 0; + right: 0; + height: 100vh; + z-index: 1; + background-color: var(--comparison-cards); + padding: 8px 16px 0; +} + +div.tabContainer { + border-bottom: 1px solid var(--black-90); + -webkit-tap-highlight-color: transparent; +} + +.tab { + color: var(--white-60); + transition: 150ms; + transition-property: color; +} + +.activeTab { + color: var(--white-100); +} + +.tabContent { + padding: 16px 0; +} + +div.socialIconsContainer { + display: flex; + column-gap: 24px; + margin-top: 16px; +} + +div.socialIconsContainer a { + -webkit-tap-highlight-color: transparent; +} + +.icon { + color: var(--white-60); +} diff --git a/landing/mobile-nav.react.js b/landing/mobile-nav.react.js new file mode 100644 --- /dev/null +++ b/landing/mobile-nav.react.js @@ -0,0 +1,59 @@ +// @flow + +import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import classNames from 'classnames'; +import * as React from 'react'; +import { NavLink } from 'react-router-dom'; + +import css from './mobile-nav.css'; +import typography from './typography.css'; + +function MobileNav(): React.Node { + const navLinkClassName = classNames([typography.paragraph2, css.tab]); + + return ( + <nav className={css.mobileNav}> + <div className={css.tabContainer}> + <NavLink + to="/keyservers" + exact + className={navLinkClassName} + activeClassName={css.activeTab} + > + <div className={css.tabContent}>Keyserver</div> + </NavLink> + </div> + <div className={css.tabContainer}> + <NavLink + to="/team" + exact + className={navLinkClassName} + activeClassName={css.activeTab} + > + <div className={css.tabContent}>Team</div> + </NavLink> + </div> + <div className={css.tabContainer}> + <NavLink + to="/investors" + exact + className={navLinkClassName} + activeClassName={css.activeTab} + > + <div className={css.tabContent}>Investors</div> + </NavLink> + </div> + <div className={css.socialIconsContainer}> + <a href="https://twitter.com/commdotapp"> + <FontAwesomeIcon icon={faTwitter} className={css.icon} size="xl" /> + </a> + <a href="https://github.com/CommE2E/comm"> + <FontAwesomeIcon icon={faGithub} className={css.icon} size="xl" /> + </a> + </div> + </nav> + ); +} + +export default MobileNav;