diff options
Diffstat (limited to 'packages/website/ts/@next/components/mobileNav.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/mobileNav.tsx | 91 |
1 files changed, 47 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> ); } } |