Merge pull request #1833 from 0xProject/feature/website/resources-menu

Added Resources dropdown to main nav

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

@@ -38,12 +38,12 @@ const introData: LinkConfig[] = [
         url: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
     },
     {
-        label: 'Market making',
-        url: `${WebsitePaths.MarketMaker}`,
+        label: 'Use 0x Instant',
+        url: `${WebsitePaths.Wiki}#Get-Started-With-Instant`,
     },
     {
-        label: 'Free credits',
-        url: `${WebsitePaths.Credits}`,
+        label: '0x Code Sandbox',
+        url: constants.URL_SANDBOX,
     },
 ];
 

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 { Column, FlexWrap } 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,13 +9,13 @@ 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';
 import { FlexWrap } from 'ts/components/newLayout';
 import { ThemeValuesInterface } from 'ts/components/siteWrap';
 import { WebsitePaths } from 'ts/types';
-import { constants } from 'ts/utils/constants';
 
 interface HeaderProps {
     location?: Location;
@@ -30,7 +30,6 @@ interface NavItemProps {
     text?: string;
     dropdownWidth?: number;
     dropdownComponent?: React.FunctionComponent<any>;
-    shouldOpenInNewTab?: boolean;
 }
 
 interface DropdownWrapInterface {
@@ -55,17 +54,17 @@ const navItems: NavItemProps[] = [
         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> {
@@ -121,9 +120,7 @@ const NavItem = (props: { link: NavItemProps; key: string }) => {
         link.url === undefined ? (
             <StyledAnchor href="#">{link.text}</StyledAnchor>
         ) : (
-            <StyledNavLink to={link.url} shouldOpenInNewTab={link.shouldOpenInNewTab}>
-                {link.text}
-            </StyledNavLink>
+            <StyledNavLink to={link.url}>{link.text}</StyledNavLink>
         );
     return (
         <LinkWrap>