Loop through products dropdown data

2 files changed, 34 insertions, 25 deletions

diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
index 366c00a1e..83d554f03 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -1,34 +1,40 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
+const navData = [
+        {
+            title: '0x Instant',
+            description: 'Simple crypto purchasing',
+            url: '#',
+        },
+        {
+            title: '0x Launch kit',
+            description: 'Build on the 0x protocol',
+            url: '#',
+        },
+        {
+            title: 'Extensions',
+            url: '#',
+        },
+];
+
 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>
+        {_.map(navData, (item, index) => (
+            <li>
+                <Heading color="#000000" isNoMargin={true} size="small">
+                    {item.title}
+                </Heading>
 
-        <li>
-            <Heading color="#000000" isNoMargin={true}>
-                Extensions
-            </Heading>
-        </li>
+                {item.description &&
+                    <Paragraph color="#5d5d5d" isNoMargin={true} size="small">
+                        {item.description}
+                    </Paragraph>
+                }
+            </li>
+        ))}
     </List>
 );
 
diff --git a/packages/website/ts/@next/components/header.tsx b/packages/website/ts/@next/components/header.tsx
index 474d36086..4b5f8d346 100644
--- a/packages/website/ts/@next/components/header.tsx
+++ b/packages/website/ts/@next/components/header.tsx
@@ -92,9 +92,11 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
     }
 
     public render(): React.ReactNode {
+        const { isOpen } = this.state;
+
         return (
             <Headroom>
-                <StyledHeader isOpen={this.state.isOpen}>
+                <StyledHeader isOpen={isOpen}>
                   <HeaderWrap>
                     <ReactRouterLink to="/next">
                         <Logo/>
@@ -131,6 +133,7 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
 const StyledHeader = styled(Section.withComponent('header'))<HeaderProps>`
     @media (max-width: 768px) {
         min-height: ${props => props.isOpen ? '385px' : '70px'};
+        overflow: ${props => !props.isOpen && 'hidden'};
         position: relative;
         transition: min-height 0.25s ease-in-out;
     }