Begin implementing doc home page

7 files changed, 197 insertions, 0 deletions

diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
new file mode 100644
index 000000000..c9bdca61b
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -0,0 +1,110 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import Drawer from 'material-ui/Drawer';
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
+import { Container } from 'ts/components/ui/container';
+import { Deco, Key, WebsitePaths } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+export interface DocsContentTopBarProps {
+    location: Location;
+    translate: Translate;
+}
+
+interface DocsContentTopBarState {
+    isDrawerOpen: boolean;
+}
+
+const styles: Styles = {
+    menuItem: {
+        fontSize: 14,
+        color: colors.darkestGrey,
+        paddingTop: 6,
+        paddingBottom: 6,
+        cursor: 'pointer',
+        fontWeight: 400,
+    },
+};
+
+export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, DocsContentTopBarState> {
+    constructor(props: DocsContentTopBarProps) {
+        super(props);
+        this.state = {
+            isDrawerOpen: false,
+        };
+    }
+    public componentWillReceiveProps(nextProps: DocsContentTopBarProps): void {
+        if (nextProps.location.pathname !== this.props.location.pathname) {
+            this.setState({
+                isDrawerOpen: false,
+            });
+        }
+    }
+    public render(): React.ReactNode {
+        const menuIconStyle = {
+            fontSize: 25,
+            color: 'black',
+            cursor: 'pointer',
+        };
+        return (
+            <div style={{ height: 75, color: colors.linkSectionGrey }} className="pb1 flex items-center">
+                <Container className="flex items-center" width="100%">
+                    <div className="col col-2">
+                        <i className="zmdi zmdi-chevron-left" /> 0xproject.com
+                    </div>
+                    <div className="col col-10">
+                        <div className="flex items-center justify-between right" style={{ width: 300 }}>
+                            <TopBarMenuItem
+                                title={this.props.translate.get(Key.Github, Deco.Cap)}
+                                path={constants.URL_GITHUB_ORG}
+                                style={styles.menuItem}
+                                isNightVersion={false}
+                                isExternal={true}
+                            />
+                            <TopBarMenuItem
+                                title={this.props.translate.get(Key.Forum, Deco.Cap)}
+                                path={constants.URL_FORUM}
+                                style={styles.menuItem}
+                                isNightVersion={false}
+                                isExternal={true}
+                            />
+                            <TopBarMenuItem
+                                title={this.props.translate.get(Key.LiveChat, Deco.Cap)}
+                                path={constants.URL_ZEROEX_CHAT}
+                                style={styles.menuItem}
+                                isNightVersion={false}
+                                isExternal={true}
+                            />
+                        </div>
+                    </div>
+                    <div className={'md-hide lg-hide'}>
+                        <div style={menuIconStyle}>
+                            <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
+                        </div>
+                    </div>
+                </Container>
+                {this._renderDrawer()}
+            </div>
+        );
+    }
+    private _renderDrawer(): React.ReactNode {
+        return (
+            <Drawer
+                open={this.state.isDrawerOpen}
+                docked={false}
+                openSecondary={true}
+                onRequestChange={this._onMenuButtonClick.bind(this)}
+            >
+                <div className="clearfix">TODO</div>
+            </Drawer>
+        );
+    }
+    private _onMenuButtonClick(): void {
+        this.setState({
+            isDrawerOpen: !this.state.isDrawerOpen,
+        });
+    }
+}
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
new file mode 100644
index 000000000..b65a27fd9
--- /dev/null
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Link } from 'react-router-dom';
+import { WebsitePaths } from 'ts/types';
+
+export const DocsLogo = () => {
+    return (
+        <div style={{ paddingTop: 28 }}>
+            <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
+                <img src="/images/docs_logo.svg" height="30px" />
+            </Link>
+        </div>
+    );
+};
diff --git a/packages/website/ts/containers/docs_home.ts b/packages/website/ts/containers/docs_home.ts
new file mode 100644
index 000000000..79bf68618
--- /dev/null
+++ b/packages/website/ts/containers/docs_home.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Home as HomeComponent, HomeProps } from 'ts/pages/documentation/home';
+import { State } from 'ts/redux/reducer';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    translate: Translate;
+}
+
+const mapStateToProps = (state: State, _ownProps: HomeProps): ConnectedState => ({
+    translate: state.translate,
+});
+
+export const DocsHome: React.ComponentClass<HomeProps> = connect(mapStateToProps, undefined)(HomeComponent);
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 981c6f2cb..8ed40e69a 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-d
 import * as injectTapEventPlugin from 'react-tap-event-plugin';
 import { MetaTags } from 'ts/components/meta_tags';
 import { About } from 'ts/containers/about';
+import { DocsHome } from 'ts/containers/docs_home';
 import { FAQ } from 'ts/containers/faq';
 import { Jobs } from 'ts/containers/jobs';
 import { Landing } from 'ts/containers/landing';
@@ -91,6 +92,7 @@ render(
                                 <Route path={WebsitePaths.FAQ} component={FAQ as any} />
                                 <Route path={WebsitePaths.About} component={About as any} />
                                 <Route path={WebsitePaths.Wiki} component={Wiki as any} />
+                                <Route path={WebsitePaths.Docs} component={DocsHome as any} />
                                 <Route
                                     path={`${WebsitePaths.ZeroExJs}/:version?`}
                                     component={LazyZeroExJSDocumentation}
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
new file mode 100644
index 000000000..eabad4def
--- /dev/null
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -0,0 +1,55 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import DocumentTitle = require('react-document-title');
+import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_bar';
+import { DocsLogo } from 'ts/components/documentation/docs_logo';
+import { Translate } from 'ts/utils/translate';
+
+export interface HomeProps {
+    location: Location;
+    translate: Translate;
+}
+
+export interface HomeState {}
+
+export class Home extends React.Component<HomeProps, HomeState> {
+    public render(): React.ReactNode {
+        return (
+            <div
+                className="flex items-center"
+                style={{
+                    width: '100%',
+                    background: 'linear-gradient(to right, #f5f5f5 0%, #f5f5f5 50%, #ffffff 50%, #ffffff 100%)',
+                }}
+            >
+                <DocumentTitle title="0x Docs Home" />
+                <div className="flex mx-auto">
+                    <div
+                        style={{
+                            width: 234,
+                            paddingLeft: 22,
+                            paddingRight: 22,
+                            backgroundColor: '#f5f5f5',
+                            height: '100vh',
+                            border: '1px black dotted',
+                        }}
+                    >
+                        <DocsLogo />
+                    </div>
+                    <div
+                        style={{
+                            width: 716,
+                            paddingLeft: 50,
+                            paddingRight: 50,
+                            backgroundColor: '#ffffff',
+                            height: '100vh',
+                            border: '1px black dotted',
+                        }}
+                    >
+                        <DocsContentTopBar location={this.props.location} translate={this.props.translate} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 2c94fe910..c208ce90f 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -475,6 +475,7 @@ export enum Key {
     ViewAllDocumentation = 'VIEW_ALL_DOCUMENTATION',
     Sandbox = 'SANDBOX',
     Github = 'GITHUB',
+    LiveChat = 'LIVE_CHAT',
 }
 
 export enum SmartContractDocSections {
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index 2b4aa5209..24d4101f4 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -73,6 +73,7 @@ export const constants = {
     URL_TESTNET_FAUCET: 'https://faucet.0xproject.com',
     URL_GITHUB_ORG: 'https://github.com/0xProject',
     URL_GITHUB_WIKI: 'https://github.com/0xProject/wiki',
+    URL_FORUM: 'https://forum.0xproject.com',
     URL_METAMASK_CHROME_STORE: 'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
     URL_METAMASK_FIREFOX_STORE: 'https://addons.mozilla.org/en-US/firefox/addon/ether-metamask/',
     URL_TOSHI_IOS_APP_STORE: 'https://itunes.apple.com/us/app/toshi-ethereum-wallet/id1278383455?mt=8',