improve navbar

src/components/navbar.js

@@ -2,14 +2,22 @@ import React from 'react'
 
 function Navbar(props) {
   // props are passed from App as {...this.state}
-  return (
-  <nav className="navbar navbar-light bg-light">
-    <div className="float-right">{`Hello, ${props.user.name}!`}</div>
-    <div className={`nav-item ${ props.component === 'about' ? "active" : ''}`}>
-      <a className="nav-link" href="#about" onClick={() => props.navigate("about") }>About</a></div>
-    <div className={`nav-item ${ props.component === 'tasks' ? "active" : ''}`}>
-      <a className="nav-link" href="#tasks" onClick={() => props.navigate("tasks") }>Tasks</a></div>
-  </nav>
+    return (
+       <nav className="navbar navbar-light bg-light">
+          <div className="navbar-brand ml-2">
+            { props.appname }
+          </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>
   )
 }