WIP refactor mobileNavMenu

5 files changed, 133 insertions, 59 deletions

diff --git a/packages/website/ts/@next/components/hamburger.tsx b/packages/website/ts/@next/components/hamburger.tsx
index 37aabcd10..97c9ba26d 100644
--- a/packages/website/ts/@next/components/hamburger.tsx
+++ b/packages/website/ts/@next/components/hamburger.tsx
@@ -22,7 +22,7 @@ const StyledHamburger = styled.button<Props>`
     width: 22px;
     height: 16px;
     position: relative;
-    z-index: 2;
+    z-index: 9999;
     padding: 0;
     outline: none;
     user-select: none;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 44686686f..d596d43ca 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -14,6 +14,8 @@ import { BREAKPOINTS, Section, Wrap } from 'ts/@next/components/layout';
 import { Logo } from 'ts/@next/components/logo';
 import { Paragraph } from 'ts/@next/components/text';
 
+import { MobileNav } from 'ts/@next/components/mobileNav';
+
 interface HeaderProps {
     isOpen: boolean;
     location?: Location;
@@ -108,47 +110,32 @@ class HeaderBase extends React.Component<HeaderProps, HeaderState> {
 
     public render(): React.ReactNode {
         const { isOpen } = this.state;
-        const { theme } = this.props;
+        const { isNavToggled, toggleMobileNav, theme } = this.props;
 
         return (
             <StyledHeader isOpen={isOpen}>
-              <HeaderWrap>
-                <ReactRouterLink to="/next">
-                    <Logo/>
-                </ReactRouterLink>
-
-                <Hamburger isOpen={this.state.isOpen} onClick={this.onMenuButtonClick}/>
-
-                <Nav>
-                    <MobileProductLinksWrap>
-                        {_.map(mobileProductLinks, (link, index) => (
-                            <Link
-                                key={`productlink-${index}`}
-                                href={link.url}
-                                isTransparent={true}
-                                isNoBorder={true}
-                            >
-                            {link.text}
-                            </Link>
-                        ))}
-                    </MobileProductLinksWrap>
+                <HeaderWrap>
+                    <ReactRouterLink to="/next">
+                        <Logo/>
+                    </ReactRouterLink>
 
                     <StyledButtonWrap>
-                      {_.map(navItems, (link, index) => (
+                        {_.map(navItems, (link, index) => (
                           this.getNavItem(link, index)
-                      ))}
+                        ))}
                     </StyledButtonWrap>
-                </Nav>
 
-                <TradeButton
-                    bgColor={theme.headerButtonBg}
-                    color="#ffffff"
-                    href="https://0xproject.com/portal"
-                >
-                    Trade on 0x
-                </TradeButton>
-
-              </HeaderWrap>
+                    <TradeButton
+                        bgColor={theme.headerButtonBg}
+                        color="#ffffff"
+                        href="https://0xproject.com/portal"
+                    >
+                        Trade on 0x
+                    </TradeButton>
+
+                    <Hamburger onClick={toggleMobileNav}/>
+                    <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
+                </HeaderWrap>
           </StyledHeader>
       );
     }
@@ -197,6 +184,11 @@ const StyledButtonWrap = styled.div`
     justify-content: space-between;
 
     @media (max-width: 800px) {
+        display: none;
+    }
+
+/*
+    @media (max-width: 800px) {
         background-color: #022924;
         display: flex;
         flex-wrap: wrap;
@@ -210,7 +202,7 @@ const StyledButtonWrap = styled.div`
         a + a {
             margin-left: 0;
         }
-    }
+    } */
 `;
 
 const MobileProductLinksWrap = styled(StyledButtonWrap)`
@@ -292,7 +284,7 @@ const DropdownWrap = styled.div<DropdownWrapInterface>`
 
 const Nav = styled.div`
     @media (max-width: 800px) {
-        background-color: ${colors.brandDark};
+        background-color: ${props => props.theme.bgColor};
         position: absolute;
         top: 0;
         left: 0;
diff --git a/packages/website/ts/@next/components/logo.tsx b/packages/website/ts/@next/components/logo.tsx
index 20cab0828..06742664e 100644
--- a/packages/website/ts/@next/components/logo.tsx
+++ b/packages/website/ts/@next/components/logo.tsx
@@ -15,10 +15,9 @@ interface LogoInterface {
 const StyledLogo = styled.div`
     text-align: left;
     position: relative;
+    z-index: 9999;
 
     @media (max-width: 800px) {
-        z-index: 2;
-
         svg {
             width: 60px;
         }
diff --git a/packages/website/ts/@next/components/mobileNav.tsx b/packages/website/ts/@next/components/mobileNav.tsx
new file mode 100644
index 000000000..f6f32ee7a
--- /dev/null
+++ b/packages/website/ts/@next/components/mobileNav.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+export class MobileNav extends React.PureComponent {
+    public render(): React.Node {
+        const { isToggled, toggleMobileNav } = this.props;
+
+        return (
+            <Wrap isToggled={isToggled}>
+                <Section>
+                    <ul>
+                        <li>0x instant</li>
+                        <li>0x Launch Kit</li>
+                    </ul>
+                </Section>
+
+                <Section isDark={true}>
+                    a
+                </Section>
+
+                {isToggled &&
+                    <Overlay onClick={toggleMobileNav} />
+                }
+            </Wrap>
+        );
+    }
+}
+
+const Wrap = styled.nav`
+    width: 100%;
+    height: 357px;
+    background-color: ${props => props.theme.mobileNavBgUpper};
+    color: ${props => props.theme.mobileNavColor};
+    transition: transform 0.5s;
+    transform: translate3d(0, ${props => props.isToggled ? 0 : '-100%'}, 0);
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    z-index: 999;
+    top: 0;
+    left: 0;
+`;
+
+const Overlay = styled.div`
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    top: 100%;
+    background: transparent;
+    cursor: pointer;
+`;
+
+const Section = styled.div`
+    width: 100%;
+    padding: 30px;
+    background-color: ${props => props.isDark && props.theme.mobileNavBgLower};
+`;
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index 48efb6e6b..7bb9d27ab 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -31,6 +31,9 @@ const GLOBAL_THEMES: ThemeInterface = {
         textColor: '#FFFFFF',
         paragraphColor: '#777777',
         linkColor: colors.brandLight,
+        mobileNavBgUpper: '#003831',
+        mobileNavBgLower: '#022924',
+        mobileNavColor: '#FFFFFF',
         dropdownBg: '#111A19',
         dropdownButtonBg: '#003831',
         dropdownColor: '#FFFFFF',
@@ -65,25 +68,47 @@ const GLOBAL_THEMES: ThemeInterface = {
     },
 };
 
-export const SiteWrap: React.StatelessComponent<Props> = props => {
-    const {
-        children,
-        theme = 'dark',
-    } = props;
-    const currentTheme = GLOBAL_THEMES[theme];
+export class SiteWrap extends React.Component {
+    public state = {
+        isMobileNavOpen: false,
+    };
 
-    return (
-        <>
-            <ThemeProvider theme={currentTheme}>
-                <>
-                    <GlobalStyles />
-                    <Header />
-                    <main>
-                        {children}
-                    </main>
-                    <Footer/>
-                </>
-            </ThemeProvider>
-        </>
-    );
-};
+    public toggleMobileNav = () => {
+        this.setState({
+            isMobileNavOpen: !this.state.isMobileNavOpen,
+        }, () => {
+            const overflow = this.state.isMobileNavOpen ? 'hidden' : 'auto';
+            document.documentElement.style.overflowY = overflow;
+        });
+    }
+
+    public render(): React.Node {
+        const {
+            children,
+            theme = 'dark',
+        } = this.props;
+        const { isMobileNavOpen } = this.state;
+        const currentTheme = GLOBAL_THEMES[theme];
+
+        return (
+            <>
+                <ThemeProvider theme={currentTheme}>
+                    <>
+                        <GlobalStyles />
+                        <Header isNavToggled={isMobileNavOpen} toggleMobileNav={this.toggleMobileNav} />
+                        <Main isNavToggled={isMobileNavOpen}>
+                            {children}
+                        </Main>
+                        <Footer/>
+                    </>
+                </ThemeProvider>
+            </>
+        );
+    }
+}
+
+const Main = styled.main`
+    transition: transform 0.5s, opacity 0.5s;
+    transform: translate3d(0, ${props => props.isNavToggled ? '357px' : 0}, 0);
+    opacity: ${props => props.isNavToggled && '0.5'};
+`;