Page MenuHomePhabricator
Files F3407483

D7763.diff
No OneTemporary
Actions

D7763.diff
View Options

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;

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 6:16 AM (15 h, 14 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2616215
Default Alt Text
D7763.diff (2 KB)

Event Timeline