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

improve navbar

Browse Source
This commit is contained in:
data 2019-06-20 17:52:46 -04:00
parent a45e816037
commit dce416d6db
1 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/navbar.js
View File

@ -4,11 +4,19 @@ 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-light bg-light"> <nav className="navbar navbar-light bg-light">
<div className="float-right">{`Hello, ${props.user.name}!`}</div> <div className="navbar-brand ml-2">
<div className={`nav-item ${ props.component === 'about' ? "active" : ''}`}> { props.appname }
<a className="nav-link" href="#about" onClick={() => props.navigate("about") }>About</a></div> </div>
<div className={`nav-item ${ props.component === 'tasks' ? "active" : ''}`}>
<a className="nav-link" href="#tasks" onClick={() => props.navigate("tasks") }>Tasks</a></div> <div className={`nav-item mr-3 ${ props.component === 'tasks' ? "active" : 'disable'}`} onClick={() => props.navigate("tasks") }>Tasks</div>
<div className={`nav-item mr-3 ${ props.component === 'about' ? "active" : 'disable'}`} onClick={() => props.navigate("about") }>About</div>
<div className="ml-auto">
<img className="rounded-circle mr-1" alt={props.user.name}
width="16px" height="16px" src="/img/default-user-image.png" />
{`Hello, ${props.user.name}!`}
</div>
</nav> </nav>
) )
} }