From fbbec03557d1995896a89da7381b9f4a8f61386b Mon Sep 17 00:00:00 2001
From: Asara <amarpreet@minhas.io>
Date: Sat, 22 Jun 2019 16:53:59 -0400
Subject: [PATCH] Basic Navbar

---
 src/components/About.js    | 11 +++++++++++
 src/components/App.js      | 21 +++++++++++++--------
 src/components/NavBar.js   | 18 ++++++++++++++++++
 src/components/PostList.js |  4 +---
 4 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 src/components/About.js
 create mode 100644 src/components/NavBar.js

diff --git a/src/components/About.js b/src/components/About.js
new file mode 100644
index 0000000..19e6293
--- /dev/null
+++ b/src/components/About.js
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const About () => {
+    return (
+        <div className="container">
+          <h4 className="center">About</h4>
+        </div>
+    )
+}
+
+export default About;
diff --git a/src/components/App.js b/src/components/App.js
index 91b0d27..4f30351 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,13 +1,18 @@
 import React from 'react';
-
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import NavBar from './NavBar';
 import PostList from './PostList';
 
-const App = () => {
-    return (
-    <div className="ui container">
-        <PostList />
-    </div>
-    );
-};
+function App() {
+  return (
+    <Router>
+      <NavBar/>
+      <Switch>
+        <Route exact path="/" component={PostList}/>
+        <Route path="/posts" component={PostList}/>
+      </Switch>
+    </Router>
+  );
+}
 
 export default App;
diff --git a/src/components/NavBar.js b/src/components/NavBar.js
new file mode 100644
index 0000000..c72fd0c
--- /dev/null
+++ b/src/components/NavBar.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
+
+import PostList from './PostList';
+
+class NavBar extends Component {
+  render() {
+    return (
+	 <div className="ui three item menu">
+	   <Link to="/" className="active item">Home</Link>
+	   <Link to="/users/" className="item">Users</Link>
+	   <Link to="/posts/" className="item">Posts</Link>
+	 </div>
+    );
+  }
+}
+
+export default NavBar;
diff --git a/src/components/PostList.js b/src/components/PostList.js
index daf89b5..e340b75 100644
--- a/src/components/PostList.js
+++ b/src/components/PostList.js
@@ -7,15 +7,13 @@ class PostList extends React.Component {
     componentDidMount() {
         this.props.fetchPosts();
     }
-
-
     renderList() {
         return this.props.posts.map(post => {
             return (
                 <div className="item" key={post.id}>
                     <div className="content">
                         <div className="description">
-                            <h1>{post.title}</h1>
+                            <h1><b><u>{post.title}</u></b></h1>
                             <ReactMarkdown source={post.content} />
                         </div>
                     </div>