Fix navbar highlighting

src/components/App.js

@@ -5,6 +5,7 @@ import PostList from './PostList';
 
 function App() {
   return (
+    <>
     <Router>
       <NavBar/>
       <Switch>
@@ -12,6 +13,7 @@ function App() {
         <Route path="/posts" component={PostList}/>
       </Switch>
     </Router>
+    </>
   );
 }
 

src/components/NavBar.js

@@ -1,17 +1,18 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
-
-import PostList from './PostList';
 
 class NavBar extends Component {
   render() {
+	let classes= 'item';
+	if (this.props.isActive) {
+	  classes += ' active';
+	}
     return (
-	 <div className="ui five item menu">
+	 <div className="ui four item menu">
-       <img src="https://avatars1.githubusercontent.com/u/2782304" style={{width:"50px",height:"50px"}}/>
+	   <Link to="/" className='item'>sudoscientist:~#</Link>
-	   <Link to="/" className="item">Home</Link>
+	   <Link to="/users/" className={classes}>Users</Link>
-	   <Link to="/users/" className="item">Users</Link>
+	   <Link to="/posts/" className={classes}>Posts</Link>
-	   <Link to="/posts/" className="item">Posts</Link>
+	   <Link to="/about/" className={classes}>About</Link>
-	   <Link to="/about/" className="item">About</Link>
 	 </div>
     );
   }