WIP dropdown menus

2 files changed, 132 insertions, 33 deletions

diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
index a9cfed538..d87540511 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_developers.tsx
@@ -1,37 +1,132 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import styled from 'styled-components';
 
-import {Link} from 'react-router-dom';
-import {WrapGrid} from 'ts/@next/components/layout';
+import {Link as RouterLink} from 'react-router-dom';
+import {Link} from 'ts/@next/components/button';
+import {Column, Wrap, WrapGrid} from 'ts/@next/components/layout';
 import {Heading} from 'ts/@next/components/text';
 
+const introData = [
+    {
+        label: 'Build a relayer',
+        url: '#',
+    },
+    {
+        label: 'Develop on Ethereum',
+        url: '#',
+    },
+    {
+        label: 'Make & take orders',
+        url: '#',
+    },
+    {
+        label: 'Use networked liquidity',
+        url: '#',
+    },
+];
+
+const docsData = [
+    {
+        label: '0x.js',
+        url: '#',
+    },
+    {
+        label: '0x Connect',
+        url: '#',
+    },
+    {
+        label: 'Smart Contract',
+        url: '#',
+    },
+];
+
+const linksData = [
+    {
+        label: 'Wiki',
+        url: '#',
+    },
+    {
+        label: 'Github',
+        url: '#',
+    },
+    {
+        label: 'Whitepaper',
+        url: '#',
+    },
+];
+
 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>
+        <DropdownWrap>
+            <div>
+                <Heading size={14} color="#5d5d5d">
+                    Getting Started
+                </Heading>
+
+                <WrapGrid isCentered={false} isWrapped={true}>
+                    {_.map(introData, (item, index) => (
+                        <RouterLink to={item.url}>
+                            {item.label}
+                        </RouterLink>
+                    ))}
+                </WrapGrid>
+            </div>
+
+            <StyledWrap>
+                <Column colWidth="1/2" isNoPadding={true}>
+                    <Heading size={14} color="#5d5d5d">
+                        Popular Docs
+                    </Heading>
+
+                    <ul>
+                        {_.map(docsData, (item, index) => (
+                            <li>
+                                <RouterLink to={item.url}>
+                                    {item.label}
+                                </RouterLink>
+                            </li>
+                        ))}
+                    </ul>
+                </Column>
+
+                <Column colWidth="1/2" isNoPadding={true}>
+                    <Heading size={14} color="#5d5d5d">
+                        Useful Links
+                    </Heading>
+
+                    <ul>
+                        {_.map(linksData, (item, index) => (
+                            <li>
+                                <RouterLink to={item.url}>
+                                    {item.label}
+                                </RouterLink>
+                            </li>
+                        ))}
+                    </ul>
+                </Column>
+            </StyledWrap>
+
+            <StyledLink to="#" bgColor="#F3F6F4" isAccentColor={true} isNoBorder={true}>
+                View All Documentation
+            </StyledLink>
+        </DropdownWrap>
     </>
 );
 
-const Wrap = styled.div`
-    padding: 15px 30px;
+const DropdownWrap = styled.div`
+    padding: 15px 30px 75px 15px;
+`;
+
+const StyledWrap = styled(Wrap)`
+    border-top: 1px solid #dadada;
+    padding-top: 20px;
+    margin-top: 30px;
 `;
 
 const StyledLink = styled(Link)`
-    width: calc(50% - 15px);
-    flex-shrink: 0;
-    color: #000000;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
 `;
diff --git a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
index 83d554f03..0271daf84 100644
--- a/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
+++ b/packages/website/ts/@next/components/dropdowns/dropdown_products.tsx
@@ -1,5 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
+import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 import {Heading, Paragraph} from 'ts/@next/components/text';
 
@@ -7,7 +8,7 @@ const navData = [
         {
             title: '0x Instant',
             description: 'Simple crypto purchasing',
-            url: '#',
+            url: '/next/0x-instant',
         },
         {
             title: '0x Launch kit',
@@ -24,22 +25,25 @@ export const DropdownProducts = () => (
     <List>
         {_.map(navData, (item, index) => (
             <li>
-                <Heading color="#000000" isNoMargin={true} size="small">
-                    {item.title}
-                </Heading>
+                <Link to={item.url}>
+                    <Heading color="#000000" isNoMargin={true} size="small">
+                        {item.title}
+                    </Heading>
 
-                {item.description &&
-                    <Paragraph color="#5d5d5d" isNoMargin={true} size="small">
-                        {item.description}
-                    </Paragraph>
-                }
+                    {item.description &&
+                        <Paragraph color="#5d5d5d" isNoMargin={true} size="small">
+                            {item.description}
+                        </Paragraph>
+                    }
+                </Link>
             </li>
         ))}
     </List>
 );
 
 const List = styled.ul`
-    li {
+    a {
         padding: 15px 30px;
+        display: block;
     }
 `;