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
1 changed files with 28 additions and 28 deletions

View File

@ -18,43 +18,43 @@ 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>
<a className={`button navbar-burger${this.state.displayNavMenu ? ' is-active' : ''}`}
onClick={ () => this.setState({ displayNavMenu: !this.state.displayNavMenu }) }>
<span></span>
<span></span>
<span></span>
</a>
</div> </div>
<span className={`nav-toggle${this.state.displayNavMenu ? ' is-active' : ''}`} <div className={`navbar-menu${ this.state.displayNavMenu ? ' is-active' : '' }`}>
onClick={ () => this.setState({ displayNavMenu: !this.state.displayNavMenu }) }> <div className='navbar-end'>
<span></span> <span className='navbar-item'>
<span></span> <a className='button'>
<span></span> Login
</span> </a>
</span>
<div className={ `nav-right nav-menu${ this.state.displayNavMenu ? ' is-active' : '' }` }> <span className='navbar-item'>
<span className='nav-item'> <Modal buttonText='Help' title='Lexiconga Help'>
<a className='button'> <div className='content has-text-left'>
Login <div dangerouslySetInnerHTML={{
</a> __html: marked(helpMarkdown.replace(/(MARKDOWN_LINK)/g, MARKDOWN_LINK))
</span> }} />
<span className='nav-item'> </div>
<Modal buttonText='Help' title='Lexiconga Help'> </Modal>
<div className='content has-text-left'> </span>
<div dangerouslySetInnerHTML={{ </div>
__html: marked(helpMarkdown.replace(/(MARKDOWN_LINK)/g, MARKDOWN_LINK))
}} />
</div>
</Modal>
</span>
</div> </div>
</nav> </nav>
); );