From b8847c3dd174c38ae60c907995a7662f32ee2072 Mon Sep 17 00:00:00 2001
From: Kfir <kfda89@gmail.com>
Date: Wed, 8 Jan 2020 22:51:23 +0200
Subject: [PATCH] Navbar created

---
 src/App.js                 |  6 ++++-
 src/components/Navbar.js   | 48 ++++++++++++++++++++++++++++++++++++++
 src/components/NavbarLi.js | 21 +++++++++++++++++
 3 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Navbar.js
 create mode 100644 src/components/NavbarLi.js

diff --git a/src/App.js b/src/App.js
index acced9d..90d1bb1 100644
--- a/src/App.js
+++ b/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>
     );
   }
 }
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
new file mode 100644
index 0000000..8767165
--- /dev/null
+++ b/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
diff --git a/src/components/NavbarLi.js b/src/components/NavbarLi.js
new file mode 100644
index 0000000..b63f3a0
--- /dev/null
+++ b/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