Page MenuHomePhabricator
Files F3407428

D7868.diff
No OneTemporary
Actions

D7868.diff
View Options

diff --git a/landing/global.css b/landing/global.css
--- a/landing/global.css
+++ b/landing/global.css
@@ -1,4 +1,7 @@
:root {
+ --landing-page-z-index: 0;
+ --mobile-nav-z-index: 1;
+ --header-z-index: 2;
--purple: #7e57c2;
--white: #fff;
--white1: #ebedee;
diff --git a/landing/header.css b/landing/header.css
--- a/landing/header.css
+++ b/landing/header.css
@@ -9,6 +9,15 @@
justify-content: space-between;
padding: 18px 32px;
width: 1850px;
+ z-index: var(--header-z-index);
+ background-color: transparent;
+ transition: 650ms;
+ transition-property: background-color;
+}
+
+div.headerContainerMobileNavActive {
+ background-color: var(--comparison-cards);
+ transition: 250ms;
}
.logo {
diff --git a/landing/header.react.js b/landing/header.react.js
--- a/landing/header.react.js
+++ b/landing/header.react.js
@@ -7,20 +7,44 @@
import * as React from 'react';
import { NavLink } from 'react-router-dom';
+import type { SetState } from 'lib/types/hook-types.js';
+
import css from './header.css';
import typography from './typography.css';
-function Header(): React.Node {
+type Props = {
+ +showMobileNav: boolean,
+ +setShowMobileNav: SetState<boolean>,
+};
+
+function Header(props: Props): React.Node {
+ const { showMobileNav, setShowMobileNav } = props;
+
+ const headerContentContainerClassName = classNames({
+ [css.headerNavContentContainer]: true,
+ [css.headerContainerMobileNavActive]: showMobileNav,
+ });
+
const logoTextClassName = classNames([typography.heading2, css.logoText]);
const badgeClassName = classNames([typography.paragraph2, css.betaBadge]);
const navLinkClassName = classNames([typography.subheading2, css.tab]);
+ const onClickLogo = React.useCallback(() => {
+ setShowMobileNav(false);
+ }, [setShowMobileNav]);
+
+ const onClickMobileNavIcon = React.useCallback(() => {
+ setShowMobileNav(!showMobileNav);
+ }, [setShowMobileNav, showMobileNav]);
+
return (
<nav className={css.headerContainer}>
- <div className={css.headerNavContentContainer}>
+ <div className={headerContentContainerClassName}>
<div className={css.logo}>
<NavLink to="/">
- <h1 className={logoTextClassName}>Comm</h1>
+ <h1 onClick={onClickLogo} className={logoTextClassName}>
+ Comm
+ </h1>
</NavLink>
<div className={badgeClassName}>Beta</div>
</div>
@@ -74,7 +98,7 @@
<FontAwesomeIcon icon={faGithub} className={css.icon} size="sm" />
</div>
</a>
- <div className={css.menuIcon}>
+ <div className={css.menuIcon} onClick={onClickMobileNavIcon}>
<FontAwesomeIcon icon={faBars} className={css.icon} size="sm" />
</div>
</div>
diff --git a/landing/landing.css b/landing/landing.css
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -7,7 +7,7 @@
word-break: break-word;
height: 100%;
position: relative;
- z-index: 0;
+ z-index: var(--landing-page-z-index);
}
.innerContainer {
diff --git a/landing/landing.react.js b/landing/landing.react.js
--- a/landing/landing.react.js
+++ b/landing/landing.react.js
@@ -85,14 +85,19 @@
}
}, [onKeyservers, onPrivacy, onSupport, onTerms, onTeam, onInvestors, onQR]);
- let header = <Header />;
- if (onQR) {
- header = null;
+ let header;
+ if (!onQR) {
+ header = (
+ <Header
+ showMobileNav={showMobileNav}
+ setShowMobileNav={setShowMobileNav}
+ />
+ );
}
- let footer = <Footer />;
- if (onQR) {
- footer = null;
+ let footer;
+ if (!onQR) {
+ footer = <Footer />;
}
return (
diff --git a/landing/mobile-nav.css b/landing/mobile-nav.css
--- a/landing/mobile-nav.css
+++ b/landing/mobile-nav.css
@@ -5,7 +5,7 @@
left: 0;
right: 0;
height: 100vh;
- z-index: 1;
+ z-index: var(--mobile-nav-z-index);
background-color: var(--comparison-cards);
padding: 8px 16px 0;
transition: 500ms;

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 5, 6:08 AM (14 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2616168
Default Alt Text
D7868.diff (3 KB)

Event Timeline