Navbar as a React.js component.
Added support for the hamburger button.
Navbar.js file:
import React, { useState } from 'react'
import {
Link
} from 'react-router-dom'
const Navbar = () => {
const [burgerActive, setBurgerActive] = useState(false)
return (
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://slawomirkwiatkowski.pl">
<div class="title">Contracts</div>
</a>
<a role="button" className={`navbar-burger ${burgerActive? "is-active": ""}`}
aria-label="menu" aria-expanded="false"
data-target="navbarBasicExample"
onClick={() => setBurgerActive(!burgerActive)}
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" className={`navbar-menu ${burgerActive? "is-active": ""}`}>
<div class="navbar-start">
<Link to="/" class="navbar-item">
Home
</Link>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<Link to="/about" class="navbar-item">
About
</Link>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider"/>
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<Link to="/user/register" class="button is-link">
<strong>Sign up</strong>
</Link>
<Link to="/user/login" class="button is-light">
Sign In
</Link>
</div>
</div>
</div>
</div>
</nav>
)
}
export default Navbar