Merge pull request #437 from jlin27/development

Add docs dropdown in header

Author: jlin27

ts/components/dropdowns/dropdown_docs.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Heading, Paragraph } from 'ts/components/text';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+import { Link } from '../documentation/shared/link';
+
+const navData = [
+    {
+        title: '0x Docs',
+        description: 'Learn and build with 0x',
+        url: WebsitePaths.Docs,
+    },
+    {
+        title: '(Alpha Release) 0x Docs',
+        description: 'Get a sneak peek at our updated documentation',
+        url: 'https://docs.0x.org/',
+        shouldOpenInNewTab: true,
+    },
+];
+
+export const DropdownDocs: React.FC = () => (
+    <List>
+        {navData.map((item, index) => (
+            <li key={`productLink-${index}`}>
+                <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
+                    <Heading asElement="h3" color="inherit" isNoMargin={true} size="small">
+                        {item.title}
+                    </Heading>
+
+                    {item.description && (
+                        <Paragraph color="inherit" isNoMargin={true} size="small" isMuted={0.5}>
+                            {item.description}
+                        </Paragraph>
+                    )}
+                </Link>
+            </li>
+        ))}
+    </List>
+);
+
+const List = styled.ul`
+    a {
+        padding: 15px 30px;
+        display: block;
+        color: inherit;
+    }
+`;

ts/components/header.tsx

@@ -7,6 +7,7 @@ import { Link } from 'ts/components/documentation/shared/link';
 import { Button } from 'ts/components/button';
 // import { DropdownProducts } from 'ts/components/dropdowns/dropdown_products';
 // import { DropdownResources } from 'ts/components/dropdowns/dropdown_resources';
+import { DropdownDocs } from 'ts/components/dropdowns/dropdown_docs';
 import { Hamburger } from 'ts/components/hamburger';
 import { Logo } from 'ts/components/logo';
 import { MobileNav } from 'ts/components/mobile_nav';
@@ -41,7 +42,8 @@ const navItems: NavItemProps[] = [
     {
         id: 'docs',
         text: 'Developers',
-        url: WebsitePaths.Docs,
+        dropdownComponent: DropdownDocs,
+        dropdownWidth: 270,
     },
     {
         id: 'zrx',