Add nav bar style

src/App.js

@@ -1,21 +0,0 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
-}
-
-export default App;

src/components/Nav/NavLink.js

@@ -4,6 +4,6 @@ import { NavLink } from 'react-router-dom'
 
 export default React.createClass({
   render() {
-    return <NavLink {...this.props} activeStyle={{color: 'red'}} />
+    return <NavLink {...this.props} activeStyle={{backgroundColor: "#111"}} />
   }
 })

src/components/Nav/index.js

@@ -4,8 +4,9 @@ import NavLink from './NavLink';
 class Nav extends React.Component {
   	render() {
   		return (
-		<ul>
+		<ul className="nav">
 		<li><NavLink to="/" exact={true}>Home</NavLink></li>
+		<li><NavLink to="/Toggle" >Toggle</NavLink></li>
 		<li><NavLink to="/tabs" >Tab View</NavLink></li>
 		<li><NavLink to="/tabss" >Test 404</NavLink></li>
 		</ul>

src/components/Tabs/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 function Tabs(props) {
 	return (
-		<h2>Test</h2>
+		<h2>The navigation bar is an example of tab view.</h2>
 	)
 }
 

src/index.css

@@ -3,3 +3,29 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+li {
+    float: left;
+    width: 100px;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+/* Change the link color to #111 (black) on hover */
+li a:hover {
+    background-color: #111;
+}

src/routes.js

@@ -8,6 +8,7 @@ import {
 
 import App from './components/App';
 import Nav from './components/Nav';
+import Toggle from './components/Toggle';
 import Home from './components/Home';
 import Tabs from './components/Tabs';
 import NotFound from './components/NotFound';
@@ -19,6 +20,7 @@ const Routes = (props) => (
     <Nav />
   	<Switch>
   	<Route path="/" exact component={Home} />
+    <Route path="/Toggle" component={Toggle} />
     <Route path="/tabs" component={Tabs} />
     <Route component={NotFound} />
     </Switch>