Navbar created

src/App.js

@@ -1,11 +1,15 @@
 import React, { Component } from 'react';
 import Todolist from './components/TodoList';
+import Navbar from './components/Navbar';
 import './App.css';
 
 class App extends Component {
   render() {
     return (
-      <Todolist />
+      <div>
+        <Navbar />
+        <Todolist />
+      </div>
     );
   }
 }

src/components/Navbar.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import NavbarLi from './NavbarLi';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+  class Navbar extends React.Component {
+   constructor(props) {
+   super(props)
+   this.state = {
+      navbarLinks:[
+        {navTitle: 'Home' , href: 'home'},
+        {navTitle: 'Blog' , href: 'blog'},
+        {navTitle: 'Contact Us', navTitle: 'contact'},
+        {navTitle: 'About', navTitle: 'about'}
+      ]
+   	 }
+   }
+   render(){
+   return(
+     <nav className="navbar navbar-expand-lg navbar-dark bg-dark" >
+      <a className="navbar-brand" >Logo</a>
+      <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb">
+        <span className="navbar-toggler-icon"></span>
+      </button>
+
+      <div className="collapse navbar-collapse" id="navb">
+        <ul className="navbar-nav mr-auto">
+          {
+            this.state.navbarLinks.map((element, index)=>(
+              <NavbarLi
+                key={index}
+                id={++index}
+                navTitle={element.navTitle}
+                 />
+            ))
+          }
+        </ul>
+        <form className="form-inline my-2 my-lg-0">
+          <input className="form-control mr-sm-2" type="text" placeholder="Search" />
+          <button className="btn btn-success my-2 my-sm-0" type="button">Search</button>
+        </form>
+      </div>
+    </nav>
+
+    )
+    }
+   }
+
+   export default Navbar

src/components/NavbarLi.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+
+class NavbarLi extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+
+ 	 }
+ }
+ render(){
+ return(
+     <li className="nav-item">
+       <a className="nav-link" id={this.props.id}>{this.props.navTitle}</a>
+     </li>
+    )
+  }
+ }
+
+ export default NavbarLi