How can I get react-bootstrap Navbar Hamburger to work in this case

Question

I learn React and JavaScript and came across this SandBox That uses react-bootstrap. It has a hamburger image as a drop down menu in the react-bootstrap NavBar.

like this with closed menu:

This with open hamburger menu:

When I try the code in my VSCode I cant get any hamburger or even the drop down style. I don't see where the hamburger image is coming from maybe it's built into react-bootstrap?
All I get is this:

Here is my Code:

import React from 'react';
import { connect } from 'react-redux';
import { Navbar, Nav, Form, FormControl, Button, NavDropdown, Container, Col } from 'react-bootstrap';
import logo1 from '../../assets/The first 100 weeks in pictures and more7.png';
import 'bootstrap/dist/css/bootstrap.min.css';

class NavBar extends React.Component {
    constructor() {
        super();
        this.state = { showMenu: false };
        this.handleMenuClick = this.handleMenuClick.bind(this);
    }

    handleMenuClick() {
        const { showMenu } = this.state;
        this.setState({ showMenu: !showMenu });
    }

    render() {
        const { showMenu } = this.props;
        const { articles } = this.props;

        return (
            <>
                <Navbar expand="lg" bg="dark" variant="dark" fixed="top" collapseOnSelect expand="lg">
                    <Container fluid>
                        <Col md="auto">
                            <Navbar.Brand href="#home" className="img-container">
                                <img alt="" src={logo1} />
                            </Navbar.Brand>
                        </Col>
                        <Col md="auto">
                            <Nav.Item>
                                <Form inline>
                                    <FormControl type="text" placeholder="Search Title, event, date" className="mr-sm-2" size="lg" />
                                </Form>
                            </Nav.Item>
                        </Col>
                        <Col>
                            <Nav.Item>
                                <Button variant="outline-info" size="lg">
                                    Search
                                </Button>
                            </Nav.Item>
                        </Col>
                        <Col md="auto">
                            <Button variant="primary" size="huge">
                                Articles
                            </Button>{' '}
                            <Button variant="primary" size="huge">
                                Timeline
                            </Button>{' '}
                            <Button variant="primary" size="huge">
                                About
                            </Button>{' '}
                        </Col>
                        <Col md="auto">
                            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                            <Navbar.Collapse id="responsive-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="#features">Features</Nav.Link>
                                    <Nav.Link href="#pricing">Pricing</Nav.Link>
                                    <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
                                        <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                                        <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
                                        <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                                        <NavDropdown.Divider />
                                        <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
                                    </NavDropdown>
                                </Nav>
                                <Nav>
                                    <Nav.Link href="#deets">More deets</Nav.Link>
                                    <Nav.Link eventKey={2} href="#memes">
                                        Dank memes
                                    </Nav.Link>
                                </Nav>
                            </Navbar.Collapse>
                        </Col>
                    </Container>
                </Navbar>
            </>
        );
    }
}

const mapStateToProps = state => {
    return { articles: state.rootReducer.remoteArticles };
};

const Aaa = connect(mapStateToProps, null)(NavBar);
export default Aaa;

Answer 1

If you want the hamburger layout (mobile layout) to show up even on desktop, you can assign false to expand prop.

<Navbar expand={false} bg="dark" variant="dark" fixed="top" collapseOnSelect>

Regarding the navigation menu that slides from the right of the viewport (see OP comments section), this isn't something that the <Navbar.Collapse/> was built for - so it does not come as a built-in functionality. However, the Bootstrap stylesheet is easy to override so you can just write your own custom css for that issue.

Here is some basic example I've written:

nav .navbar-collapse {
  position: fixed;
  top: 56px;
  background: #343a40;
  right: -100%; /* pull the menu out of the viewport from right */
  width: 100vw;
  height: 100vh;
  display: block;
  transition: right 0.3s ease; /* transition for smooth sliding */
}

nav .navbar-collapse.show {
  right: 0; /* push the menu back to viewport */
}