WIP mobile header + developer dropdown

1 files changed, 159 insertions, 0 deletions

diff --git a/packages/website/ts/@next/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/@next/components/dropdowns/developers_drop_down.tsx
new file mode 100644
index 000000000..bf75c3b92
--- /dev/null
+++ b/packages/website/ts/@next/components/dropdowns/developers_drop_down.tsx
@@ -0,0 +1,159 @@
+import { ALink, Link } from '@0x/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { colors } from 'ts/style/colors';
+import { Container } from 'ts/components/ui/container';
+import { DropDown } from 'ts/components/ui/drop_down';
+import { Heading, Paragraph } from 'ts/@next/components/text';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+const gettingStartedKeyToLinkInfo1: ALink[] = [
+    {
+        title: Key.BuildARelayer,
+        to: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+    },
+    {
+        title: Key.OrderBasics,
+        to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+    },
+];
+const gettingStartedKeyToLinkInfo2: ALink[] = [
+    {
+        title: Key.DevelopOnEthereum,
+        to: `${WebsitePaths.Wiki}#Ethereum-Development`,
+    },
+    {
+        title: Key.UseNetworkedLiquidity,
+        to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+    },
+];
+const popularDocsToLinkInfos: ALink[] = [
+    {
+        title: Key.ZeroExJs,
+        to: WebsitePaths.ZeroExJs,
+    },
+    {
+        title: Key.Connect,
+        to: WebsitePaths.Connect,
+    },
+    {
+        title: Key.SmartContract,
+        to: WebsitePaths.SmartContracts,
+    },
+];
+const usefulLinksToLinkInfo: ALink[] = [
+    {
+        title: Key.Wiki,
+        to: WebsitePaths.Wiki,
+    },
+    {
+        title: Key.Github,
+        to: constants.URL_GITHUB_ORG,
+        shouldOpenInNewTab: true,
+    },
+    {
+        title: Key.Whitepaper,
+        to: WebsitePaths.Whitepaper,
+        shouldOpenInNewTab: true,
+    },
+];
+
+interface DevelopersDropDownProps {
+    location: Location;
+}
+
+interface DevelopersDropDownState {}
+
+export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> {
+    public render(): React.ReactNode {
+        const activeNode = (
+            <Paragraph isNoMargin={true}>
+                Developers
+            </Paragraph>
+        );
+        return (
+            <DropDown
+                activeNode={activeNode}
+                popoverContent={this._renderDropdownMenu()}
+                anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+                targetOrigin={{ horizontal: 'left', vertical: 'top' }}
+                popoverStyle={{ borderRadius: 0, width: 420, height: 377, marginTop: 0 }}
+            />
+        );
+    }
+    private _renderDropdownMenu(): React.ReactNode {
+        const sectionPadding = '26px';
+        const dropdownMenu = (
+            <Container>
+                <Container className="flex" padding={sectionPadding}>
+                    <Container paddingRight="45px">
+                        {this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')}
+                    </Container>
+                    <Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container>
+                </Container>
+                <Container width="100%" height="1px" backgroundColor={colors.grey300} />
+                <Container className="flex" padding={sectionPadding}>
+                    <Container paddingRight="62px">
+                        <Container>{this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')}</Container>
+                    </Container>
+                    <Container>
+                        <Container>{this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')}</Container>
+                    </Container>
+                </Container>
+                <Link to={WebsitePaths.Docs} fontColor={colors.brandLight}>
+                    <Container
+                        padding="0.9rem"
+                        backgroundColor={colors.white}
+                        borderBottomLeftRadius={4}
+                        borderBottomRightRadius={4}
+                    >
+                        <Paragraph color={colors.brandLight} isCentered={true} isNoMargin={true}>
+                            View all documentation
+                        </Paragraph>
+                    </Container>
+                </Link>
+            </Container>
+        );
+        return dropdownMenu;
+    }
+    private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode {
+        const numLinks = links.length;
+        let i = 0;
+        const renderLinks = _.map(links, (link: ALink) => {
+            const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#');
+            const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki;
+            let to = link.to;
+            if (isWikiLink && isOnWiki) {
+                to = `${link.to.split('#')[1]}`;
+            }
+            i++;
+            const isLast = i === numLinks;
+            // const linkText = this.props.translate.get(link.title as Key, Deco.Cap);
+            const linkText = link.title;
+            return (
+                <Container className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}>
+                    <Link to={to} shouldOpenInNewTab={!!link.shouldOpenInNewTab}>
+                        <Paragraph size="small" color={colors.brandDark} isNoMargin={true}>
+                            {linkText}
+                        </Paragraph>
+                    </Link>
+                </Container>
+            );
+        });
+        return (
+            <Container>
+                <Container height="33px">
+                    {!_.isEmpty(title) && (
+                        <Heading asElement="h3" size="small">
+                            {title}
+                        </Heading>
+                    )}
+                </Container>
+                {renderLinks}
+            </Container>
+        );
+    }
+}