diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 18:10:01 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-14 18:10:01 +0800 |
| commit | 64c168eafc6abe6b7517f85a695e07b486c3b580 (patch) | |
| tree | a7cbe502af7009d0928105297277f90b467bfef4 /packages/website/ts/@next | |
| parent | e48887bc6f2ba158430a911d4d07376e65401f26 (diff) | |
| download | dexon-0x-contracts-64c168eafc6abe6b7517f85a695e07b486c3b580.tar.gz dexon-0x-contracts-64c168eafc6abe6b7517f85a695e07b486c3b580.tar.zst dexon-0x-contracts-64c168eafc6abe6b7517f85a695e07b486c3b580.zip | |
Hides mobile nav on desktop, adds flexwrap maxwidth
Diffstat (limited to 'packages/website/ts/@next')
| -rw-r--r-- | packages/website/ts/@next/components/mobileNav.tsx | 91 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/newLayout.tsx | 2 |
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'}) { |