aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/documentation/docs_top_bar.tsx
blob: 2054d08604375a002d59c9d6ae8c58e4574a9cd4 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
import { ALink, colors, Link } from '@0x/react-shared';
import * as _ from 'lodash';
import Drawer from 'material-ui/Drawer';
import * as React from 'react';
import { DocsLogo } from 'ts/components/documentation/docs_logo';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
import { Deco, Key, ScreenWidths } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { Translate } from 'ts/utils/translate';

export interface DocsTopBarProps {
    location: Location;
    screenWidth: ScreenWidths;
    translate: Translate;
    sidebar?: React.ReactNode;
}

interface DocsTopBarState {
    isDrawerOpen: boolean;
}

export class DocsTopBar extends React.Component<DocsTopBarProps, DocsTopBarState> {
    constructor(props: DocsTopBarProps) {
        super(props);
        this.state = {
            isDrawerOpen: false,
        };
    }
    public componentWillReceiveProps(nextProps: DocsTopBarProps): void {
        if (nextProps.location.pathname !== this.props.location.pathname) {
            this.setState({
                isDrawerOpen: false,
            });
        }
    }
    public render(): React.ReactNode {
        return (
            <Container height={80}>
                <Container
                    className="flex items-center lg-pt3 md-pt3 sm-pt1 lg-mt1 md-mt1 sm-mt0 lg-justify-end md-justify-end sm-justify-start"
                    width="100%"
                >
                    <Container className="sm-hide xs-hide">
                        <Container className="flex items-center justify-between right" width="300px">
                            {this._renderMenuItems(constants.DEVELOPER_TOPBAR_LINKS)}
                        </Container>
                    </Container>
                    <Container className="lg-hide md-hide">
                        <Container paddingTop="6px">
                            <DocsLogo height={30} />
                        </Container>
                    </Container>
                    <Container className="md-hide lg-hide absolute" right="18px" top="12px">
                        <i
                            className="zmdi zmdi-menu"
                            style={{
                                color: colors.grey700,
                                fontSize: 30,
                                cursor: 'pointer',
                            }}
                            onClick={this._onMenuButtonClick.bind(this)}
                        />
                    </Container>
                </Container>
                <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'13px'} />
                {this.props.screenWidth === ScreenWidths.Sm && this._renderDrawer()}
            </Container>
        );
    }
    private _renderMenuItems(menuItemLinks: ALink[]): React.ReactNode {
        const menuItems = _.map(menuItemLinks, menuItemInfo => {
            return (
                <Link
                    key={`menu-item-${menuItemInfo.title}`}
                    to={menuItemInfo.to}
                    shouldOpenInNewTab={menuItemInfo.shouldOpenInNewTab}
                >
                    <Container className="flex items-center" paddingLeft="4px">
                        <Text fontSize="16px" fontColor={colors.lightLinkBlue} fontWeight="bold">
                            {this.props.translate.get(menuItemInfo.title as Key, Deco.Cap)}
                        </Text>
                    </Container>
                </Link>
            );
        });
        return menuItems;
    }
    private _renderDrawer(): React.ReactNode {
        return (
            <Drawer
                open={this.state.isDrawerOpen}
                docked={false}
                openSecondary={true}
                onRequestChange={this._onMenuButtonClick.bind(this)}
            >
                <Container className="clearfix pl1 pt2" onClick={this._onMenuButtonClick.bind(this)}>
                    {this.props.sidebar}
                </Container>
            </Drawer>
        );
    }
    private _onMenuButtonClick(): void {
        this.setState({
            isDrawerOpen: !this.state.isDrawerOpen,
        });
    }
}