diff --git a/landing/mobile-nav.css b/landing/mobile-nav.css new file mode 100644 index 000000000..2547b07aa --- /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 index 000000000..404e95e4c --- /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 ( + + ); +} + +export default MobileNav;