2017-04-04 22:39:35 +02:00
|
|
|
import Inferno from 'inferno';
|
2018-02-22 07:47:39 +01:00
|
|
|
import { Component } from 'inferno';
|
2017-11-15 21:59:58 +01:00
|
|
|
import PropTypes from 'prop-types';
|
2017-08-23 00:33:36 +02:00
|
|
|
import marked from 'marked';
|
2017-04-04 22:39:35 +02:00
|
|
|
|
2017-08-23 00:33:36 +02:00
|
|
|
import { Modal } from './Modal';
|
2017-07-26 06:11:33 +02:00
|
|
|
import { SearchBox } from '../management/SearchBox';
|
2018-01-12 22:58:21 +01:00
|
|
|
import { AccountManager } from '../management/AccountManager';
|
2017-04-19 19:34:03 +02:00
|
|
|
|
2017-08-23 00:33:36 +02:00
|
|
|
import helpMarkdown from '../../assets/text/help.md';
|
|
|
|
|
2017-04-04 22:39:35 +02:00
|
|
|
export class Header extends Component {
|
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
2017-04-19 23:11:37 +02:00
|
|
|
|
2017-11-15 21:59:58 +01:00
|
|
|
PropTypes.checkPropTypes({
|
|
|
|
partsOfSpeech: PropTypes.array.isRequired,
|
|
|
|
search: PropTypes.func.isRequired,
|
2018-01-12 22:58:21 +01:00
|
|
|
updater: PropTypes.object.isRequired,
|
2018-07-02 00:08:01 +02:00
|
|
|
dictionary: PropTypes.object,
|
2017-11-15 21:59:58 +01:00
|
|
|
}, props, 'prop', 'Header');
|
|
|
|
|
2017-04-19 23:11:37 +02:00
|
|
|
this.state = {
|
2017-06-25 23:49:23 +02:00
|
|
|
displayNavMenu: false,
|
2017-04-19 23:11:37 +02:00
|
|
|
}
|
2017-04-04 22:39:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
return (
|
2017-10-31 16:07:23 +01:00
|
|
|
<nav className='navbar'>
|
|
|
|
<div className='navbar-brand'>
|
|
|
|
<a href='/' className='navbar-item'>
|
2017-06-25 23:49:23 +02:00
|
|
|
<img src={ `./logo.${ (typeof SVGRect !== 'undefined') ? 'svg' : 'png' }` } alt='Lexiconga Logo' />
|
2017-04-04 22:39:35 +02:00
|
|
|
</a>
|
|
|
|
|
2017-10-31 16:07:23 +01:00
|
|
|
<div className='navbar-item'>
|
2017-04-19 19:34:03 +02:00
|
|
|
<SearchBox
|
2017-06-25 23:49:23 +02:00
|
|
|
partsOfSpeech={ this.props.partsOfSpeech }
|
2017-11-15 21:59:58 +01:00
|
|
|
search={ this.props.search } />
|
2017-04-19 19:34:03 +02:00
|
|
|
</div>
|
2017-10-31 16:07:23 +01:00
|
|
|
|
|
|
|
<a className={`button navbar-burger${this.state.displayNavMenu ? ' is-active' : ''}`}
|
|
|
|
onClick={ () => this.setState({ displayNavMenu: !this.state.displayNavMenu }) }>
|
|
|
|
<span></span>
|
|
|
|
<span></span>
|
|
|
|
<span></span>
|
|
|
|
</a>
|
2017-04-19 19:34:03 +02:00
|
|
|
</div>
|
|
|
|
|
2017-10-31 16:07:23 +01:00
|
|
|
<div className={`navbar-menu${ this.state.displayNavMenu ? ' is-active' : '' }`}>
|
|
|
|
<div className='navbar-end'>
|
2018-01-21 22:22:31 +01:00
|
|
|
<span className='navbar-item has-text-right-touch'>
|
2018-07-02 00:08:01 +02:00
|
|
|
<AccountManager
|
|
|
|
updater={ this.props.updater }
|
|
|
|
dictionary={ this.props.dictionary } />
|
2017-10-31 16:07:23 +01:00
|
|
|
</span>
|
2018-01-21 22:22:31 +01:00
|
|
|
<span className='navbar-item has-text-right-touch'>
|
2017-10-31 16:07:23 +01:00
|
|
|
<Modal buttonText='Help' title='Lexiconga Help'>
|
|
|
|
<div className='content has-text-left'>
|
|
|
|
<div dangerouslySetInnerHTML={{
|
|
|
|
__html: marked(helpMarkdown.replace(/(MARKDOWN_LINK)/g, MARKDOWN_LINK))
|
|
|
|
}} />
|
|
|
|
</div>
|
|
|
|
</Modal>
|
|
|
|
</span>
|
|
|
|
</div>
|
2017-04-04 22:39:35 +02:00
|
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|