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',id:1},
        {navTitle: 'Blog' , href: 'blog', id:2},
        {navTitle: 'Contact Us', navTitle: 'contact', id:3},
        {navTitle: 'About', navTitle: 'about',id:60}
      ]
   	 }
   }
   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={element.id}
                id={element.id}
                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