Auto collapse hamburger navigation menu after selection

web
mobile

Topic: Auto collapse hamburger navigation menu after selection

Tim Jones pro asked 2 months ago

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;

Tim Jones pro answered 2 months ago

Piotr,

Thanks very much for your quick response and admirably simple solution to my request.

Works exactly as required :-)

Regards,

Tim


Piotr Glejzer staff answered 2 months ago

May you try this code?

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="/" onClick={() => this.onClick()}>
                      Home
                    </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="/services" onClick={() => this.onClick()}>
                      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;

Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.8.7
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: MacOS Catalina
  • Provided sample code: No
  • Provided link: No