76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import classnames from 'classnames';
|
|
import HeaderAuth from './Auth';
|
|
import HeaderDrawer from './Drawer';
|
|
import MenuIcon from 'static/images/menu.svg';
|
|
import Logo from 'static/images/logo-name.svg';
|
|
import './style.less';
|
|
|
|
interface Props {
|
|
isTransparent?: boolean;
|
|
}
|
|
|
|
interface State {
|
|
isDrawerOpen: boolean;
|
|
}
|
|
|
|
export default class Header extends React.Component<Props, State> {
|
|
state: State = {
|
|
isDrawerOpen: false,
|
|
};
|
|
|
|
render() {
|
|
const { isTransparent } = this.props;
|
|
const { isDrawerOpen } = this.state;
|
|
|
|
return (
|
|
<div
|
|
className={classnames({
|
|
Header: true,
|
|
['is-transparent']: isTransparent,
|
|
})}
|
|
>
|
|
<div className="Header-inner">
|
|
<div className="Header-links is-left is-desktop">
|
|
<Link to="/proposals" className="Header-links-link">
|
|
Proposals
|
|
</Link>
|
|
<Link to="/requests" className="Header-links-link">
|
|
Requests
|
|
</Link>
|
|
<Link to="/create" className="Header-links-link">
|
|
Start a Proposal
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="Header-links is-left is-mobile">
|
|
<button className="Header-links-link is-menu" onClick={this.openDrawer}>
|
|
<MenuIcon className="Header-links-link-icon" />
|
|
</button>
|
|
</div>
|
|
|
|
<Link className="Header-title" to="/">
|
|
<Logo className="Header-title-logo" />
|
|
</Link>
|
|
|
|
<div className="Header-links is-right">
|
|
<HeaderAuth />
|
|
</div>
|
|
|
|
<HeaderDrawer isOpen={isDrawerOpen} onClose={this.closeDrawer} />
|
|
|
|
{process.env.TESTNET && (
|
|
<div className="Header-testnet">
|
|
<span>Testnet</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private openDrawer = () => this.setState({ isDrawerOpen: true });
|
|
private closeDrawer = () => this.setState({ isDrawerOpen: false });
|
|
}
|