From c0bf29c32983aa43980a7b97b8c4575862285437 Mon Sep 17 00:00:00 2001
From: Asara <amarpreet@minhas.io>
Date: Mon, 24 Jun 2019 21:54:34 -0400
Subject: [PATCH] Fix navbar highlighting

---
 src/components/App.js    |  2 ++
 src/components/NavBar.js | 19 ++++++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 4f30351..22765b5 100644
--- a/src/components/App.js
+++ b/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>
+    </>
   );
 }
 
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
index 8ad3f0b..82a6bbe 100644
--- a/src/components/NavBar.js
+++ b/src/components/NavBar.js
@@ -1,17 +1,18 @@
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
-
-import PostList from './PostList';
+import { Link } from 'react-router-dom';
 
 class NavBar extends Component {
   render() {
+	let classes= 'item';
+	if (this.props.isActive) {
+	  classes += ' active';
+	}
     return (
-	 <div className="ui five item menu">
-       <img src="https://avatars1.githubusercontent.com/u/2782304" style={{width:"50px",height:"50px"}}/>
-	   <Link to="/" className="item">Home</Link>
-	   <Link to="/users/" className="item">Users</Link>
-	   <Link to="/posts/" className="item">Posts</Link>
-	   <Link to="/about/" className="item">About</Link>
+	 <div className="ui four item menu">
+	   <Link to="/" className='item'>sudoscientist:~#</Link>
+	   <Link to="/users/" className={classes}>Users</Link>
+	   <Link to="/posts/" className={classes}>Posts</Link>
+	   <Link to="/about/" className={classes}>About</Link>
 	 </div>
     );
   }