111 lines
4.0 KiB
TypeScript
111 lines
4.0 KiB
TypeScript
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,
|
|
});
|
|
}
|
|
}
|