Added Resources dropdown to main nav

packages/website/ts/components/dropdowns/dropdown_resources.tsx

@@ -0,0 +1,100 @@
+import { Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled, { withTheme } from 'styled-components';
+
+import { Button } from 'ts/components/button';
+import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
+import { ThemeValuesInterface } from 'ts/components/siteWrap';
+import { Heading } from 'ts/components/text';
+import { WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+
+interface Props {
+    theme: ThemeValuesInterface;
+}
+
+interface LinkConfig {
+    label: string;
+    url: string;
+    shouldOpenInNewTab?: boolean;
+}
+
+const introData: LinkConfig[] = [
+    {
+        label: 'Blog',
+        url: constants.URL_BLOG,
+        shouldOpenInNewTab: true,
+    },
+    {
+        label: 'Legal Wiki',
+        url: `${WebsitePaths.Wiki}#Legal-Wiki`,
+        shouldOpenInNewTab: true,
+    },
+];
+
+const programsData: LinkConfig[] = [
+    {
+        label: 'Ecosystem Grants',
+        url: WebsitePaths.Ecosystem,
+    },
+    {
+        label: 'Market Making',
+        url: WebsitePaths.MarketMaker,
+    },
+    {
+        label: 'Infrastructure Credits',
+        url: WebsitePaths.Credits,
+    },
+];
+
+export const DropdownResources: React.FunctionComponent<Props> = withTheme((props: Props) => (
+    <>
+        <DropdownWrap>
+            <ul>
+                    {_.map(introData, (item, index) => (
+                        <li key={`introLink-${index}`}>
+                            <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>{item.label}</Link>
+                        </li>
+                    ))}
+            </ul>
+
+            <StyledWrap>
+                <Column width="calc(100% - 15px)">
+                    <Heading asElement="h4" size={14} color="inherit" marginBottom="15px" isMuted={0.35}>
+                        Programs
+                    </Heading>
+
+                    <ul>
+                        {_.map(programsData, (item, index) => (
+                            <li key={`programsLink-${index}`}>
+                                <Link to={item.url} shouldOpenInNewTab={item.shouldOpenInNewTab}>
+                                    {item.label}
+                                </Link>
+                            </li>
+                        ))}
+                    </ul>
+                </Column>
+
+            </StyledWrap>
+        </DropdownWrap>
+    </>
+));
+
+const DropdownWrap = styled.div`
+    padding: 15px 30px 0 30px;
+
+    a {
+        color: inherit;
+    }
+
+    ul li {
+        margin: 0 0 16px 0;
+    }
+`;
+
+const StyledWrap = styled(FlexWrap)`
+    padding-top: 20px;
+    margin-top: 10px;
+    position: relative;
+`;

packages/website/ts/components/header.tsx

@@ -9,6 +9,7 @@ import Headroom from 'react-headroom';
 import { Button } from 'ts/components/button';
 import { DropdownDevelopers } from 'ts/components/dropdowns/dropdown_developers';
 import { DropdownProducts } from 'ts/components/dropdowns/dropdown_products';
+import { DropdownResources } from 'ts/components/dropdowns/dropdown_resources';
 import { Hamburger } from 'ts/components/hamburger';
 import { Logo } from 'ts/components/logo';
 import { MobileNav } from 'ts/components/mobileNav';
@@ -50,22 +51,22 @@ const navItems: NavItemProps[] = [
         dropdownWidth: 280,
     },
     {
-        id: 'developers',
-        text: 'Developers',
+        id: 'docs',
+        text: 'Docs',
         dropdownComponent: DropdownDevelopers,
         dropdownWidth: 480,
     },
+    {
+        id: 'resources',
+        text: 'Resources',
+        dropdownComponent: DropdownResources,
+        dropdownWidth: 270,
+    },
     {
         id: 'about',
         url: WebsitePaths.AboutMission,
         text: 'About',
     },
-    {
-        id: 'blog',
-        url: constants.URL_BLOG,
-        shouldOpenInNewTab: true,
-        text: 'Blog',
-    },
 ];
 
 class HeaderBase extends React.Component<HeaderProps> {