import React, { Component } from 'react'
import { Link } from "react-router-dom";

class HeaderComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {

        }
    }

    render() {
        return (
            <div>
                <header>
                    <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                        <span className="navbar-brand">Auction Hunter</span>
                        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                            <span className="navbar-toggler-icon"></span>
                        </button>
                        <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
                            <div className="navbar-nav">
                                <Link className="nav-item nav-link" to="/">Targets</Link>
                                <Link className="nav-item nav-link" to="/add">Add target</Link>
                            </div>
                        </div>
                    </nav>
                </header>
            </div>
        )
    }
}

export default HeaderComponent
import React, { Component } from 'react'
import { Link } from "react-router-dom";
import { Navbar, Nav } from "react-bootstrap";

class HeaderComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {

        }
    }

    render() {
        return (
            <Navbar bg="dark" variant="dark" expand="lg">
                <Navbar.Brand href="/">Auction Hunter</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <Link className="nav-item nav-link" to="/">Targets</Link>
                        <Link className="nav-item nav-link" to="/add">Add target</Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        )
    }
}

export default HeaderComponent
Fix displaying navbar when is collapsed.
Fix displaying navbar when is collapsed.

