Differential D7781 Diff 29718 landing/mobile-nav.react.js

Changeset View

Standalone View

landing/mobile-nav.react.js

	// @flow			// @flow

	import { faTwitter, faGithub } from '@fortawesome/free-brands-svg-icons';			import { faTwitter, faGithub } from '@fortawesome/free-brands-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 './mobile-nav.css';			import css from './mobile-nav.css';
	import typography from './typography.css';			import typography from './typography.css';

	function MobileNav(): React.Node {			type Props = {
				+showMobileNav: boolean,
				+setShowMobileNav: SetState<boolean>,
				};

				function MobileNav(props: Props): React.Node {
				const { showMobileNav, setShowMobileNav } = props;

	const navLinkClassName = classNames([typography.paragraph2, css.tab]);			const navLinkClassName = classNames([typography.paragraph2, css.tab]);

				const mobileNavClassName = classNames({
				[css.mobileNav]: true,
				[css.activeMobileNav]: showMobileNav,
				});

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

	return (			return (
	<nav className={css.mobileNav}>			<nav className={mobileNavClassName}>
	<div className={css.tabContainer}>			<div className={css.tabContainer}>
	<NavLink			<NavLink
	to="/keyservers"			to="/keyservers"
	exact			exact
	className={navLinkClassName}			className={navLinkClassName}
	activeClassName={css.activeTab}			activeClassName={css.activeTab}
	>			>
	<div className={css.tabContent}>Keyserver</div>			<div onClick={onClickTab} className={css.tabContent}>
				Keyserver
				</div>
	</NavLink>			</NavLink>
	</div>			</div>
	<div className={css.tabContainer}>			<div className={css.tabContainer}>
	<NavLink			<NavLink
	to="/team"			to="/team"
	exact			exact
	className={navLinkClassName}			className={navLinkClassName}
	activeClassName={css.activeTab}			activeClassName={css.activeTab}
	>			>
	<div className={css.tabContent}>Team</div>			<div onClick={onClickTab} className={css.tabContent}>
				Team
				</div>
	</NavLink>			</NavLink>
	</div>			</div>
	<div className={css.tabContainer}>			<div className={css.tabContainer}>
	<NavLink			<NavLink
	to="/investors"			to="/investors"
	exact			exact
	className={navLinkClassName}			className={navLinkClassName}
	activeClassName={css.activeTab}			activeClassName={css.activeTab}
	>			>
	<div className={css.tabContent}>Investors</div>			<div onClick={onClickTab} className={css.tabContent}>
				Investors
				</div>
	</NavLink>			</NavLink>
	</div>			</div>
	<div className={css.socialIconsContainer}>			<div className={css.socialIconsContainer}>
	<a href="https://twitter.com/commdotapp">			<a href="https://twitter.com/commdotapp">
	<FontAwesomeIcon icon={faTwitter} className={css.icon} size="xl" />			<FontAwesomeIcon icon={faTwitter} className={css.icon} size="xl" />
	</a>			</a>
	<a href="https://github.com/CommE2E/comm">			<a href="https://github.com/CommE2E/comm">
	<FontAwesomeIcon icon={faGithub} className={css.icon} size="xl" />			<FontAwesomeIcon icon={faGithub} className={css.icon} size="xl" />
	</a>			</a>
	</div>			</div>
	</nav>			</nav>
	);			);
	}			}

	export default MobileNav;			export default MobileNav;