notnull/tasks-mockup
2
0
Fork 0
Code Issues 5 Pull Requests 1 Releases Wiki Activity

simplify navbar

Browse Source
This commit is contained in:
data 2019-06-20 16:56:38 -04:00
parent 70ee0b3570
commit 4190d0a432
1 changed files with 9 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/navbar.js
View File

@ -3,26 +3,12 @@ import React from 'react'
function Navbar(props) { function Navbar(props) {
// props are passed from App as {...this.state} // props are passed from App as {...this.state}
return ( return (
<nav className="navbar navbar-expand-lg navbar-light bg-light"> <nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="#1">&gt;.&lt;</a> <div className="float-right">{`Hello, ${props.user.name}!`}</div>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <div className={`nav-item ${ props.component === 'about' ? "active" : ''}`}>
<span className="navbar-toggler-icon"></span> <a className="nav-link" href="#about" onClick={() => props.navigate("about") }>About</a></div>
</button> <div className={`nav-item ${ props.component === 'tasks' ? "active" : ''}`}>
<a className="nav-link" href="#tasks" onClick={() => props.navigate("tasks") }>Tasks</a></div>
<div className="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul className="navbar-nav mr-auto mt-2 mt-lg-0">
<li className={`nav-item ${ props.component === 'about' ? "active" : ''}`}>
<a className="nav-link" href="#about" onClick={() => {props.navigate("about")} }>About</a>
</li>
<li className={`nav-item ${ props.component === 'tasks' ? "active" : ''}`}>
<a className="nav-link" href="#tasks" onClick={() => props.navigate("tasks") }>Tasks <span className="sr-only">(current)</span>
</a>
</li>
<li className="nav-item">
<a className="nav-link disabled" href="#hi">hi</a>
</li>
</ul>
</div>
</nav> </nav>
) )
} }