aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-14 18:10:01 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-12-14 18:10:01 +0800
commit64c168eafc6abe6b7517f85a695e07b486c3b580 (patch)
treea7cbe502af7009d0928105297277f90b467bfef4 /packages/website/ts/@next/components
parente48887bc6f2ba158430a911d4d07376e65401f26 (diff)
downloaddexon-sol-tools-64c168eafc6abe6b7517f85a695e07b486c3b580.tar
dexon-sol-tools-64c168eafc6abe6b7517f85a695e07b486c3b580.tar.gz
dexon-sol-tools-64c168eafc6abe6b7517f85a695e07b486c3b580.tar.bz2
dexon-sol-tools-64c168eafc6abe6b7517f85a695e07b486c3b580.tar.lz
dexon-sol-tools-64c168eafc6abe6b7517f85a695e07b486c3b580.tar.xz
dexon-sol-tools-64c168eafc6abe6b7517f85a695e07b486c3b580.tar.zst
dexon-sol-tools-64c168eafc6abe6b7517f85a695e07b486c3b580.zip
Hides mobile nav on desktop, adds flexwrap maxwidth
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/mobileNav.tsx91
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx2
2 files changed, 49 insertions, 44 deletions
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
index c19d4b587..4ae604c3f 100644
--- a/packages/website/ts/@next/components/mobileNav.tsx
+++ b/packages/website/ts/@next/components/mobileNav.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+import MediaQuery from 'react-responsive';
import styled from 'styled-components';
import {Link} from 'react-router-dom';
@@ -15,53 +16,55 @@ export class MobileNav extends React.PureComponent<Props> {
const { isToggled, toggleMobileNav } = this.props;
return (
- <Wrap isToggled={isToggled}>
- <Section>
- <h4>Products</h4>
+ <MediaQuery maxWidth={800}>
+ <Wrap isToggled={isToggled}>
+ <Section>
+ <h4>Products</h4>
- <ul>
- <li>
- <Link to="#">
- 0x instant
- </Link>
- </li>
- <li>
- <Link to="#">
- 0x Launch Kit
- </Link>
- </li>
- </ul>
- </Section>
+ <ul>
+ <li>
+ <Link to="#">
+ 0x instant
+ </Link>
+ </li>
+ <li>
+ <Link to="#">
+ 0x Launch Kit
+ </Link>
+ </li>
+ </ul>
+ </Section>
- <Section isDark={true}>
- <Grid as="ul" isWrapped={true}>
- <li>
- <Link to="/next/why">
- Why 0x
- </Link>
- </li>
- <li>
- <Link to="/next/about/mission">
- About
- </Link>
- </li>
- <li>
- <Link to="/next">
- Products
- </Link>
- </li>
- <li>
- <Link to="https://blog.0xproject.com/latest">
- Blog
- </Link>
- </li>
- </Grid>
- </Section>
+ <Section isDark={true}>
+ <Grid as="ul" width="100%" isWrapped={true}>
+ <li>
+ <Link to="/next/why">
+ Why 0x
+ </Link>
+ </li>
+ <li>
+ <Link to="/next/about/mission">
+ About
+ </Link>
+ </li>
+ <li>
+ <Link to="/next">
+ Products
+ </Link>
+ </li>
+ <li>
+ <Link to="https://blog.0xproject.com/latest">
+ Blog
+ </Link>
+ </li>
+ </Grid>
+ </Section>
- {isToggled &&
- <Overlay onClick={toggleMobileNav} />
- }
- </Wrap>
+ {isToggled &&
+ <Overlay onClick={toggleMobileNav} />
+ }
+ </Wrap>
+ </MediaQuery>
);
}
}
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index fe0a290c5..3285ff877 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -69,6 +69,8 @@ export const Column = styled.div<ColumnProps>`
`;
export const FlexWrap = styled.div<FlexProps>`
+ max-width: 1500px;
+ margin: 0 auto;
padding: ${props => props.padding};
@media (min-width: ${props => props.flexBreakpoint || '768px'}) {