49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
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
|