73 lines
1.9 KiB
JavaScript
73 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
|
|
function Navbar(props) {
|
|
return (
|
|
<nav className="navbar navbar-expand-lg navbar-light bg-light">
|
|
<a
|
|
className="navbar-brand"
|
|
href="#profile"
|
|
onClick={() => props.navigate('profile')}
|
|
>
|
|
{`Hello, ${props.user.name}!`}
|
|
</a>
|
|
<button
|
|
className="navbar-toggler"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#navbarText"
|
|
aria-controls="navbarText"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span className="navbar-toggler-icon" />
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="navbarText">
|
|
<ul className="navbar-nav mr-auto">
|
|
<li
|
|
className={`nav-item ${
|
|
props.component === 'about' ? 'active' : ''
|
|
}`}
|
|
onClick={() => props.navigate('articles')}
|
|
>
|
|
<a className="nav-link" href="#articles">
|
|
Articles
|
|
</a>
|
|
</li>
|
|
<li
|
|
className={`nav-item ${
|
|
props.component === 'project' ? 'active' : ''
|
|
}`}
|
|
onClick={() => props.navigate('projects')}
|
|
>
|
|
<a className="nav-link" href="#projects">
|
|
Projects
|
|
</a>
|
|
</li>
|
|
<li
|
|
className={`nav-item ${
|
|
props.component === 'tasks' ? 'active' : ''
|
|
}`}
|
|
onClick={() => props.navigate('tasks')}
|
|
>
|
|
<a className="nav-link" href="#tasks">
|
|
Tasks
|
|
</a>
|
|
</li>
|
|
<li
|
|
className={`nav-item ${
|
|
props.component === 'about' ? 'active' : ''
|
|
}`}
|
|
onClick={() => props.navigate('about')}
|
|
>
|
|
<a className="nav-link" href="#about">
|
|
About
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|