Differential D7868 Diff 29720 landing/header.react.js

Changeset View

Standalone View

landing/header.react.js

// @flow		// @flow

import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';		import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';
import { faExternalLinkAlt, faBars } from '@fortawesome/free-solid-svg-icons';		import { faExternalLinkAlt, faBars } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';		import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';		import classNames from 'classnames';
import * as React from 'react';		import * as React from 'react';
import { NavLink } from 'react-router-dom';		import { NavLink } from 'react-router-dom';

		import type { SetState } from 'lib/types/hook-types.js';

import css from './header.css';		import css from './header.css';
import typography from './typography.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 logoTextClassName = classNames([typography.heading2, css.logoText]);
const badgeClassName = classNames([typography.paragraph2, css.betaBadge]);		const badgeClassName = classNames([typography.paragraph2, css.betaBadge]);
const navLinkClassName = classNames([typography.subheading2, css.tab]);		const navLinkClassName = classNames([typography.subheading2, css.tab]);

		const onClickLogo = React.useCallback(() => {
		setShowMobileNav(false);
		}, [setShowMobileNav]);

		const onClickMobileNavIcon = React.useCallback(() => {
		setShowMobileNav(!showMobileNav);
		}, [setShowMobileNav, showMobileNav]);

return (		return (
<nav className={css.headerContainer}>		<nav className={css.headerContainer}>
<div className={css.headerNavContentContainer}>		<div className={headerContentContainerClassName}>
<div className={css.logo}>		<div className={css.logo}>
<NavLink to="/">		<NavLink to="/">
<h1 className={logoTextClassName}>Comm</h1>		<h1 onClick={onClickLogo} className={logoTextClassName}>
		Comm
		</h1>
</NavLink>		</NavLink>
<div className={badgeClassName}>Beta</div>		<div className={badgeClassName}>Beta</div>
</div>		</div>
<div className={css.pageNav}>		<div className={css.pageNav}>
<NavLink		<NavLink
to="/keyservers"		to="/keyservers"
exact		exact
className={navLinkClassName}		className={navLinkClassName}
Show All 37 Lines	<nav className={css.headerContainer}>
/>		/>
</div>		</div>
</a>		</a>
<a href="https://github.com/CommE2E/comm">		<a href="https://github.com/CommE2E/comm">
<div className={css.githubIcon}>		<div className={css.githubIcon}>
<FontAwesomeIcon icon={faGithub} className={css.icon} size="sm" />		<FontAwesomeIcon icon={faGithub} className={css.icon} size="sm" />
</div>		</div>
</a>		</a>
<div className={css.menuIcon}>		<div className={css.menuIcon} onClick={onClickMobileNavIcon}>
<FontAwesomeIcon icon={faBars} className={css.icon} size="sm" />		<FontAwesomeIcon icon={faBars} className={css.icon} size="sm" />
</div>		</div>
</div>		</div>
</div>		</div>
</nav>		</nav>
);		);
}		}

export default Header;		export default Header;