import React from "react" import { Link, NavLink } from "react-router-dom"; import propTypes from "prop-types" import { Navbar, Nav } from "react-bootstrap" import Logo from "../components/logo" const Header = ({isAuthenticated, logout}) => ( <Navbar bg="light" expand="lg"> <Navbar.Brand> <Link to="/"> <Logo /> </Link> </Navbar.Brand> <Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Collapse id="basic-navbar-nav float-right"> <Nav className="mr-auto"> <NavLink className="nav-link" activeClassName="header-active" to="/sponsor"> Create Contest </NavLink> <NavLink className="nav-link" activeClassName="header-active" to="/contest"> Explore Contests </NavLink> </Nav> <Nav className="ml-auto mr-3"> <NavLink className="nav-link" activeClassName="header-active" to="/drafter">Drafting Guidelines</NavLink> <NavLink className="nav-link" activeClassName="header-active" to="/about">About</NavLink> {isAuthenticated ?<NavLink href="#" className="nav-link" activeClassName="header-active" to="/login"onClick={() => logout()}>Logout</NavLink> :<NavLink className="nav-link" activeClassName="header-active" to="/login">Login</NavLink> } </Nav> </Navbar.Collapse> </Navbar> ) export default Header Header.propTypes = { isAuthenticated: propTypes.bool, } Header.defaultProps = { isAuthenticated: false }