Как закрыть гамбургер-меню, нажав на пустое место на экране?(класс: оверлей-бургер)

Question

Какой код мне нужно добавить в JS, чтобы закрыть меню гамбургера, щелкнув по пустому месту?

<div class="main-header">
    <div class="hamburger-menu">
        <a href="#" class="menu-btn">
            <span></span>
        </a>
        <nav class="links-menu">
            <a href="" class="nav-point">About</a>
            <a href="" class="nav-point">Services</a>
            <a href="" class="nav-point">Calculator</a>
            <a href="" class="nav-point">News</a>
            <a href="" class="nav-point">Contact</a>
        </nav>
        <div class="overlay-burger"></div>
    </div>
</div>

JS:

$('.menu-btn').on('click', function(e) {
    e.preventDefault();
    $(this).toggleClass('menu-btn-active');
    $('.links-menu').toggleClass('links-menu-active');
});

Answer 1

Если пользователь не нажмет кнопку, удалите активный класс:

window.onclick = function(event) {
  if (!event.target.matches('.menu-btn')) { 
    $('.links-menu').removeClass('links-menu-active'); // remove active class from the nav
    $('.menu-btn').removeClass('menu-btn-active'); // remove active class from button
  }
}