Begin implementing doc home page

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,
+        });
+    }
+}

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>
+    );
+};