From 64c168eafc6abe6b7517f85a695e07b486c3b580 Mon Sep 17 00:00:00 2001
From: Ezekiel Aquino <ezekiel@bakkenbaeck.no>
Date: Fri, 14 Dec 2018 11:10:01 +0100
Subject: Hides mobile nav on desktop, adds flexwrap maxwidth

---
 packages/website/ts/@next/components/mobileNav.tsx | 91 +++++++++++-----------
 packages/website/ts/@next/components/newLayout.tsx |  2 +
 2 files changed, 49 insertions(+), 44 deletions(-)

(limited to 'packages/website/ts/@next/components')

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'}) {
-- 
cgit