{"size": 2153, "ext": "js", "max_stars_repo_path": "client/src/component/Header/Header.js", "max_stars_repo_name": "Rion612/BikeBd", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/src/component/Header/Header.js", "max_issues_repo_name": "Rion612/BikeBd", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "client/src/component/Header/Header.js", "max_forks_repo_name": "Rion612/BikeBd", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 52.512195122, "max_line_length": 161, "alphanum_fraction": 0.5629354389}
import React, { useState } from 'react';
import './header.css'
import { Navbar, Button, Form, FormControl } from 'react-bootstrap'
import { NavLink } from 'react-router-dom'



const Header = () => {
    const [isMobile, setIsMobile] = useState(false);
    const showBar = () => setIsMobile(!isMobile);
    return (
        <div>
            <div>

                <Navbar style={{ backgroundColor: '#060b26' }} variant="dark">
                    <button className="mobile-menu-icon" onClick={showBar}>{isMobile ? <i className="fa fa-times"></i> : <i className="fa fa-bars"></i>}</button>
                    <Navbar.Brand href="#home" className="mr-auto" style={{ fontSize: '30px' }}>BikePedia</Navbar.Brand>

                </Navbar>

            </div>

            <div className="navdiv">
                <ul className={isMobile ? "nav-link-mobile" : "nav-links"} onClick={() => setIsMobile(false)}>
                    <NavLink to="/" className="home" activeStyle={{ color: "blue" }} exact={true} > <li>Home</li></NavLink>
                    <NavLink to="/brands" className="brands" activeStyle={{ color: "blue" }}><li>Bikes & Brands</li></NavLink>
                    <NavLink to="/helmets" className="helmet" activeStyle={{ color: "blue" }}><li>Helmet</li></NavLink>
                    <NavLink to="/showrooms" className="showrooms" activeStyle={{ color: "blue" }}><li>Showrooms</li></NavLink>
                    <NavLink to="/bike/scooter" className="scooter" activeStyle={{ color: "blue" }}><li>Scooter</li></NavLink>
                    <NavLink to="/bikes/electric_bikes" className="ebikes" activeStyle={{ color: "blue" }}><li>Electric Bikes</li></NavLink>
                    <NavLink to="/news" className="news" activeStyle={{ color: "blue" }}> <li>News,Offers & Travel Story</li></NavLink>
                    <NavLink to="/comparison" className="compare" activeStyle={{ color: "blue" }}><li>Comparison</li></NavLink>
                    <NavLink to="/contact" className="contact" activeStyle={{ color: "blue" }}><li>Contact us</li></NavLink>
                </ul>
            </div>

        </div>
    );
};

export default Header;