[WIP styling mobile nav menu for docs]

packages/website/ts/components/button.tsx

@@ -27,6 +27,7 @@ export interface ButtonInterface {
     href?: string;
     type?: string;
     target?: string;
+    textAlign?: string;
     to?: string;
     onClick?: (e: any) => any;
     theme?: ThemeInterface;
@@ -64,6 +65,7 @@ export const Button: React.StatelessComponent<ButtonInterface> = (props: ButtonI
 
 Button.defaultProps = {
     borderColor: 'rgba(255, 255, 255, .4)',
+    textAlign: 'center',
 };
 
 const ButtonBase = styled.button<ButtonInterface>`
@@ -78,7 +80,7 @@ const ButtonBase = styled.button<ButtonInterface>`
     padding: ${props =>
         !props.isNoPadding && !props.isWithArrow && ((!!props.padding && props.padding) || '18px 30px')};
     white-space: ${props => props.isWithArrow && 'nowrap'};
-    text-align: center;
+    text-align: ${props => props.textAlign};
     font-size: ${props => (props.fontSize ? props.fontSize : props.isWithArrow ? '20px' : '18px')};
     text-decoration: none;
     cursor: pointer;

packages/website/ts/components/docs/header.tsx

@@ -5,10 +5,11 @@ import styled, { css } from 'styled-components';
 
 import { Link } from '@0x/react-shared';
 
+import { MobileNav } from 'ts/components/docs/mobileNav';
 import { SearchInput } from 'ts/components/docs/search_input';
+
 import { Hamburger } from 'ts/components/hamburger';
 import { Logo } from 'ts/components/logo';
-import { MobileNav } from 'ts/components/mobileNav';
 import { FlexWrap } from 'ts/components/newLayout';
 import { ThemeValuesInterface } from 'ts/components/siteWrap';
 
@@ -30,13 +31,11 @@ interface INavItems {
     url?: string;
     id?: string;
     text?: string;
-    dropdownWidth?: number;
-    dropdownComponent?: React.FunctionComponent<any>;
 }
 
 const navItems: INavItems[] = [
     {
-        id: 'why',
+        id: 'core-concepts',
         url: WebsitePaths.Why,
         text: 'Core Concepts',
     },
@@ -93,7 +92,7 @@ export const Header: React.FC<IHeaderProps> = ({ isNavToggled, toggleMobileNav }
                     </MediaQuery>
 
                     <Hamburger isOpen={isNavToggled} onClick={toggleMobileNav} />
-                    <MobileNav isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
+                    <MobileNav navItems={navItems} isToggled={isNavToggled} toggleMobileNav={toggleMobileNav} />
                 </HeaderWrap>
             </StyledHeader>
         </Headroom>

packages/website/ts/components/docs/mobileNav.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import MediaQuery from 'react-responsive';
+import styled from 'styled-components';
+
+import { Link } from '@0x/react-shared';
+
+import { Button } from 'ts/components/button';
+import { SearchInput } from 'ts/components/docs/search_input';
+
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+
+interface IMobileNavProps {
+    isToggled: boolean;
+    toggleMobileNav: () => void;
+    navItems: INavItems[];
+}
+
+interface INavItems {
+    url?: string;
+    id?: string;
+    text?: string;
+    dropdownWidth?: number;
+    dropdownComponent?: React.FunctionComponent<any>;
+}
+
+export const MobileNav: React.FC<IMobileNavProps> = props => {
+    const { navItems, isToggled, toggleMobileNav } = props;
+
+    return (
+        <MediaQuery maxWidth={800}>
+            <Wrap isToggled={isToggled}>
+                <Section>
+                    <SearchInput isHome={false} />
+
+                    <ul>
+                        {navItems.map(link => (
+                            <li key={link.id}>
+                                <MobileNavLink to={link.url}>{link.text}</MobileNavLink>
+                            </li>
+                        ))}
+                    </ul>
+                </Section>
+
+                <BackButton
+                    to={WebsitePaths.Home}
+                    textAlign="left"
+                    transparentBgColor={colors.backgroundLight}
+                    isWithArrow={true}
+                >
+                    Back to main site
+                </BackButton>
+
+                {isToggled && <Overlay onClick={toggleMobileNav} />}
+            </Wrap>
+        </MediaQuery>
+    );
+};
+
+const BackButton = styled(Button)`
+    padding: 24px 30px;
+`;
+
+const Wrap = styled.nav<{ isToggled: boolean }>`
+    width: 100%;
+    height: 357px;
+    background-color: ${props => props.theme.mobileNavBgUpper};
+    color: ${props => props.theme.mobileNavColor};
+    transition: ${props => (props.isToggled ? 'visibility 0s, transform 0.5s' : 'visibility 0s 0.5s, transform 0.5s')};
+    transform: translate3d(0, ${props => (props.isToggled ? 0 : '-100%')}, 0);
+    visibility: ${props => !props.isToggled && 'hidden'};
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    z-index: 20;
+    top: 0;
+    left: 0;
+    font-size: 20px;
+
+    h4 {
+        font-size: 14px;
+        opacity: 0.5;
+    }
+`;
+
+const MobileNavLink = styled(Link)`
+    padding: 15px 0;
+    display: block;
+    color: inherit;
+`;
+
+const Overlay = styled.div`
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    top: 100%;
+    background: transparent;
+    cursor: pointer;
+`;
+
+interface ISectionProps {
+    isDark?: boolean;
+}
+
+const Section = styled.div<ISectionProps>`
+    width: 100%;
+    padding: 15px 30px;
+    background-color: ${props => (props.isDark ? props.theme.mobileNavBgLower : 'transparent')};
+`;