how to close hamburger menu in react class based component

Question

I am working on react classs based component I have hamburger[https://easyupload.io/isutmy] whenever I am clicking on closing the hamburger so it is working properly but what i need is whenever i click outside the on webpage so it should close .

kindly refer to the code -

import '../scss/header.scss';
import { Link } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import {routes} from '../routes';
class Header extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      
      url: window.location.href,
      isOtherPage: true
    }
    this.setState = this.state.url;
    }
  getUrls = (e) => {
      console.log(e.target.pathname);
   const isHomePage = e.target.pathname === '/';
    
      this.menuToggle()
      var element = document.getElementById("header");
      if (isHomePage) {
        element.classList.remove("header2");
        element.classList.add("header1");
      } else {
        element.classList.remove("header1");
        element.classList.add("header2");
      }
      this.setState = { isOtherPage: isHomePage };
    

}
menuToggle = (e) => {
  var menuClass = document.getElementById("menu");
  menuClass.classList.toggle('menuOpen');
  // console.log(e)
}

jsx starts from here kindly check and provide the solution where i am making mistake

 
  return (
    <div>
      <header>
       <div id="header" className={'header header1'}>
          {/* {headerBg} */}
          <div className="topbar">
            <div className="logo">
              <a href="#" className="animated bounceInDown"><img src='/media/logo.png' alt="Logo" /></a>
            </div>
            <div className="menu-cover top-nav">
              <div className="menus">
                <div className="menu-res">
                  {/* <h2><i class="fa fa-bars"></i></h2> */}
                  <input id="menu-toggle" type="checkbox" />
                  <label class='menu-button-container' for="menu-toggle">
                    <div onClick={this.menuToggle} class='menu-button'></div>
                  </label>
                </div>
                <ul id="menu" className=" menu animated">
                  <li><NavLink exact onClick={this.getUrls.bind(this)} to="/" activeClassName="active">Home</NavLink></li>
                  <li><NavLink onClick={this.getUrls.bind(this)} to="/about" activeClassName="active" className="">About</NavLink></li>
                  <li><NavLink onClick={this.getUrls.bind(this)} to="/careers" activeClassName="active">Career</NavLink></li>
                  <li><NavLink onClick={this.getUrls.bind(this)} to="/contact" activeClassName="active">Contact</NavLink></li>
                  <a className="login-b" href="">Login</a>
                </ul>
                
              </div>
            </div>
          </div>
          <div className="clearfix"></div>
        </div>  </header>
      {this.props.children}
    </div>
  )
}
}


export default Header;```


[1]: https://i.stack.imgur.com/ZBNZG.png

Answer 1

I can't guarantee this will work, but you might want to try setting an onBlur on your <ul> tag

<ul id="menu" className=" menu animated" onBlur={() => callSomeFunctionToSetClassname()}>