Question

Can the hamburger collapse action be triggered by click on menu item, so that link is rendered and hamburger menu is auto closed, rather than obscuring the page and requiring another click on the hamburger menu to close it again?

Expected behavior

Hamburger Menu showing as viewport restricted width

Hamburger Menu clicked

Revealed Menu item clicked

Navigation to link

Hamburger menu auto closes

Actual behavior

Hamburger Menu showing as viewport restricted width

Hamburger Menu clicked

Revealed Menu item clicked

Navigation to link

Hamburger menu remains open and requires to be clicked to be closed

Resources (screenshots, code snippets etc.)

Existing code which displays "Actual Behaviour':

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

import {
    MDBCollapse,
    MDBContainer,
    MDBNavbar,
    MDBNavbarBrand,
    MDBNavbarNav,
    MDBNavbarToggler,
    MDBNavItem,
    MDBNavLink,
} from "mdbreact";

import HomePage from "./HomePage";
import ServicesPage from "./ServicesPage";

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapse: false,
        };
        this.onClick = this.onClick.bind(this);
    }

    toggleCollapse = () => {
        this.setState({ isOpen: !this.state.isOpen });
    }

    onClick() {
        this.setState({
            collapse: !this.state.collapse,
        });
    }

    render() {
        return (
            <div>
                <header>
                    <MDBNavbar style={{backgroundColor: 'rgba(100,150,200,0.5)'}} dark expand="md" scrolling
                               fixed={"top"}>
                        <MDBContainer>
                            <MDBNavbarBrand href="/">
                                <strong>Company Name</strong>
                            </MDBNavbarBrand>
                            <MDBNavbarToggler onClick={this.onClick}/>
                            <MDBCollapse isOpen={this.state.collapse} navbar>
                                <MDBNavbarNav left>
                                    <MDBNavItem active>
                                        <MDBNavLink to="/">Home</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                        <MDBNavLink to="/services">Services</MDBNavLink>
                                    </MDBNavItem>
                                </MDBNavbarNav>
                            </MDBCollapse>
                        </MDBContainer>
                    </MDBNavbar>
                </header>
                <div className="bg">
                    <div className="content">
                        <Switch>
                            <Route exact path="/" component={HomePage}/>
                            <Route path="/services" component={ServicesPage}/>
                        </Switch>
                    </div>
                </div>
            </div>
        );
    }
}

export default Main;