aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/mobileNav.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/mobileNav.tsx')
-rw-r--r--packages/website/ts/components/mobileNav.tsx113
1 files changed, 0 insertions, 113 deletions
diff --git a/packages/website/ts/components/mobileNav.tsx b/packages/website/ts/components/mobileNav.tsx
deleted file mode 100644
index 1aa826755..000000000
--- a/packages/website/ts/components/mobileNav.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import * as React from 'react';
-import MediaQuery from 'react-responsive';
-import styled from 'styled-components';
-
-import { Link } from 'react-router-dom';
-
-import { WrapGrid, WrapProps } from 'ts/components/newLayout';
-import { WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-
-interface Props {
- isToggled: boolean;
- toggleMobileNav: () => void;
-}
-
-export class MobileNav extends React.PureComponent<Props> {
- public render(): React.ReactNode {
- const { isToggled, toggleMobileNav } = this.props;
-
- return (
- <MediaQuery maxWidth={800}>
- <Wrap isToggled={isToggled}>
- <Section>
- <h4>Products</h4>
-
- <ul>
- <li>
- <Link to={WebsitePaths.Instant}>0x Instant</Link>
- </li>
- <li>
- <Link to={WebsitePaths.LaunchKit}>0x Launch Kit</Link>
- </li>
- </ul>
- </Section>
-
- <Section isDark={true}>
- <Grid as="ul" isFullWidth={true} isWrapped={true}>
- <li>
- <Link to={WebsitePaths.Why}>Why 0x</Link>
- </li>
- <li>
- <Link to={WebsitePaths.AboutMission}>About</Link>
- </li>
- <li>
- <a href={constants.URL_BLOG} target="_blank">
- Blog
- </a>
- </li>
- </Grid>
- </Section>
-
- {isToggled && <Overlay onClick={toggleMobileNav} />}
- </Wrap>
- </MediaQuery>
- );
- }
-}
-
-const Wrap = styled.nav<{ isToggled: boolean }>`
- width: 100%;
- height: 357px;
- background-color: ${props => props.theme.mobileNavBgUpper};
- color: ${props => props.theme.mobileNavColor};
- transition: ${props => (props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s')};
- transform: translate3d(0, ${props => (props.isToggled ? 0 : '-100%')}, 0);
- visibility: ${props => !props.isToggled && 'hidden'};
- position: fixed;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- z-index: 20;
- top: 0;
- left: 0;
- font-size: 20px;
-
- a {
- padding: 15px 0;
- display: block;
- color: inherit;
- }
-
- h4 {
- font-size: 14px;
- opacity: 0.5;
- }
-`;
-
-const Overlay = styled.div`
- position: absolute;
- width: 100vw;
- height: 100vh;
- top: 100%;
- background: transparent;
- cursor: pointer;
-`;
-
-interface SectionProps {
- isDark?: boolean;
-}
-const Section = styled.div<SectionProps>`
- width: 100%;
- padding: 15px 30px;
- background-color: ${props => (props.isDark ? props.theme.mobileNavBgLower : 'transparent')};
-`;
-
-const Grid = styled(WrapGrid)<WrapProps>`
- justify-content: flex-start;
-
- li {
- width: 50%;
- flex-shrink: 0;
- }
-`;