WIP dropdown header

4 files changed, 122 insertions, 38 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index 0f70a4543..9e1d97508 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -57,6 +57,7 @@
         "react-copy-to-clipboard": "^5.0.0",
         "react-document-title": "^2.0.3",
         "react-dom": "^16.4.2",
+        "react-headroom": "^2.2.4",
         "react-helmet": "^5.2.0",
         "react-lazyload": "^2.3.0",
         "react-loadable": "^5.5.0",
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
new file mode 100644
index 000000000..a9cfed538
--- /dev/null
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {Link} from 'react-router-dom';
+import {WrapGrid} from 'ts/@next/components/layout';
+import {Heading} from 'ts/@next/components/text';
+
+export const DropdownDevelopers = () => (
+    <>
+        <Wrap>
+            <Heading size="small" color="#5d5d5d">
+                Getting Started
+            </Heading>
+
+            <WrapGrid isCentered={false} isWrapped={true}>
+                <Link to="#">Build a relayer</Link>
+                <Link to="#">Develop on Ethereum</Link>
+                <Link to="#">Make & take orders</Link>
+                <Link to="#">Use networked liquidity</Link>
+            </WrapGrid>
+        </Wrap>
+
+        <Wrap>
+            asdf
+        </Wrap>
+    </>
+);
+
+const Wrap = styled.div`
+    padding: 15px 30px;
+`;
+
+const StyledLink = styled(Link)`
+    width: calc(50% - 15px);
+    flex-shrink: 0;
+    color: #000000;
+`;
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
new file mode 100644
index 000000000..366c00a1e
--- /dev/null
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import {Heading, Paragraph} from 'ts/@next/components/text';
+
+export const DropdownProducts = () => (
+    <List>
+        <li>
+            <Heading color="#000000" isNoMargin={true}>
+                0x Instant
+            </Heading>
+
+            <Paragraph color="#5d5d5d" isNoMargin={true}>
+                Simple crypto purchasing
+            </Paragraph>
+        </li>
+
+        <li>
+            <Heading color="#000000" isNoMargin={true}>
+                0x Launch Kit
+            </Heading>
+
+            <Paragraph color="#5d5d5d" isNoMargin={true}>
+                Build on the 0x protocol
+            </Paragraph>
+        </li>
+
+        <li>
+            <Heading color="#000000" isNoMargin={true}>
+                Extensions
+            </Heading>
+        </li>
+    </List>
+);
+
+const List = styled.ul`
+    li {
+        padding: 15px 30px;
+    }
+`;
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 99e634e18..6444a1b97 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import * as React from 'react';
+import Headroom from 'react-headroom';
 import { Link as ReactRouterLink } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -7,6 +8,8 @@ import { colors } from 'ts/style/colors';
 
 import { Button, ButtonWrap, Link } from 'ts/@next/components/button';
 import { DevelopersDropDown } from 'ts/@next/components/dropdowns/developers_drop_down';
+import { DropdownDevelopers } from 'ts/@next/components/dropdowns/dropdown_developers';
+import { DropdownProducts } from 'ts/@next/components/dropdowns/dropdown_products';
 import { Dropdown } from 'ts/@next/components/dropdowns/mock';
 import { Hamburger } from 'ts/@next/components/hamburger';
 import { Section, Wrap } from 'ts/@next/components/layout';
@@ -43,56 +46,56 @@ const navItems: NavItem[] = [
         id: 'products',
         url: '/next/0x-instant',
         text: 'Products',
-        dropdownComponent: Dropdown,
+        dropdownComponent: DropdownProducts,
     },
     {
         id: 'developers',
         url: '#',
         text: 'Developers',
-        dropdownComponent: Dropdown,
+        dropdownComponent: DropdownDevelopers,
     },
     { id: 'about', url: '/next/about/mission', text: 'About' },
     { id: 'blog', url: '#', text: 'Blog' },
 ];
 
 export class Header extends React.Component<HeaderProps, HeaderState> {
-    constructor(props: HeaderProps) {
-        super(props);
-        this.state = {
-            isOpen: false,
-        };
-    }
+    public state = {
+        isOpen: false,
+    };
+
     public render(): React.ReactNode {
         return (
-            <StyledHeader isOpen={this.state.isOpen}>
-              <HeaderWrap>
-                <ReactRouterLink to="/next">
-                    <Logo/>
-                </ReactRouterLink>
-
-                <Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/>
-
-                <Nav>
-                    <MobileProductLinksWrap>
-                        {_.map(mobileProductLinks, (link, index) => (
-                            <StyledLink
-                                key={`productlink-${index}`}
-                                href={link.url}
-                                isTransparent={true}
-                                isNoBorder={true}
-                            >
-                            {link.text}
-                            </StyledLink>
-                        ))}
-                    </MobileProductLinksWrap>
-
-                    <StyledButtonWrap>
-                      {_.map(navItems, (link, index) => this._getNavItem(link, index))}
-                    </StyledButtonWrap>
-                </Nav>
-                <TradeButton href="#">Trade on 0x</TradeButton>
-              </HeaderWrap>
-          </StyledHeader>
+            <Headroom>
+                <StyledHeader isOpen={this.state.isOpen}>
+                  <HeaderWrap>
+                    <ReactRouterLink to="/next">
+                        <Logo/>
+                    </ReactRouterLink>
+
+                    <Hamburger isOpen={this.state.isOpen} onClick={this._onMenuButtonClick.bind(this)}/>
+
+                    <Nav>
+                        <MobileProductLinksWrap>
+                            {_.map(mobileProductLinks, (link, index) => (
+                                <StyledLink
+                                    key={`productlink-${index}`}
+                                    href={link.url}
+                                    isTransparent={true}
+                                    isNoBorder={true}
+                                >
+                                {link.text}
+                                </StyledLink>
+                            ))}
+                        </MobileProductLinksWrap>
+
+                        <StyledButtonWrap>
+                          {_.map(navItems, (link, index) => this._getNavItem(link, index))}
+                        </StyledButtonWrap>
+                    </Nav>
+                    <TradeButton href="#">Trade on 0x</TradeButton>
+                  </HeaderWrap>
+              </StyledHeader>
+            </Headroom>
       );
     }
     private _onMenuButtonClick(): void {
@@ -135,6 +138,10 @@ const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
             padding: 20px 20px 0 !important;
         }
     }
+
+    @media (min-width: 768px) {
+        background-color: ${props => props.theme.bgColor};
+    }
 `;
 
 const HeaderWrap = styled(Wrap)`
@@ -207,7 +214,7 @@ const LinkWrap = styled.div`
 
 const DropdownWrap = styled.div`
     width: 420px;
-    padding: 30px;
+    padding: 15px 0;
     background-color: #ffffff;
     color: #000000;
     position: absolute;