1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-05-12 13:11:45 +02:00

Update Header nav to fit changed Bulma structure

This commit is contained in:
Robbie Antenesse 2017-10-31 09:07:23 -06:00
parent a74765f4cf
commit 6d79cdc7de

View file

@ -18,35 +18,34 @@ export class Header extends Component {
render () { render () {
return ( return (
<nav className='nav'> <nav className='navbar'>
<div className='nav-left'> <div className='navbar-brand'>
<a href='/' className='nav-item image'> <a href='/' className='navbar-item'>
<img src={ `./logo.${ (typeof SVGRect !== 'undefined') ? 'svg' : 'png' }` } alt='Lexiconga Logo' /> <img src={ `./logo.${ (typeof SVGRect !== 'undefined') ? 'svg' : 'png' }` } alt='Lexiconga Logo' />
</a> </a>
</div>
<div className='nav-center'> <div className='navbar-item'>
<div className='nav-item'>
<SearchBox <SearchBox
partsOfSpeech={ this.props.partsOfSpeech } partsOfSpeech={ this.props.partsOfSpeech }
search={ (searchConfig) => this.props.search(searchConfig) } /> search={ (searchConfig) => this.props.search(searchConfig) } />
</div> </div>
</div>
<span className={`nav-toggle${this.state.displayNavMenu ? ' is-active' : ''}`} <a className={`button navbar-burger${this.state.displayNavMenu ? ' is-active' : ''}`}
onClick={ () => this.setState({ displayNavMenu: !this.state.displayNavMenu }) }> onClick={ () => this.setState({ displayNavMenu: !this.state.displayNavMenu }) }>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</span> </a>
</div>
<div className={ `nav-right nav-menu${ this.state.displayNavMenu ? ' is-active' : '' }` }> <div className={`navbar-menu${ this.state.displayNavMenu ? ' is-active' : '' }`}>
<span className='nav-item'> <div className='navbar-end'>
<span className='navbar-item'>
<a className='button'> <a className='button'>
Login Login
</a> </a>
</span> </span>
<span className='nav-item'> <span className='navbar-item'>
<Modal buttonText='Help' title='Lexiconga Help'> <Modal buttonText='Help' title='Lexiconga Help'>
<div className='content has-text-left'> <div className='content has-text-left'>
<div dangerouslySetInnerHTML={{ <div dangerouslySetInnerHTML={{
@ -56,6 +55,7 @@ export class Header extends Component {
</Modal> </Modal>
</span> </span>
</div> </div>
</div>
</nav> </nav>
); );
} }