close sidenav when click

Question

Hello could you help me please with my Jquery function ? When my sidenav is shown, if i click on a link, the sidebar stay opened and no content is showing. May be i miss something ?

var $hamburger = $(".hamburger"),
    $menuWrap = $('.menu-wrap');

$hamburger.on("click", function () {    
    $hamburger.toggleClass("is-active");
    // Do something else, like open/close menu
    $menuWrap.toggleClass('menu-show');
    $hamburger.click(function(){
        $(this).next().slideToggle(300);

    });

});

Sorry, i add the missing code with entire html code.

<div class="d-md-none">
            <div class="d-flex justify-content-end">
                <div class="hamburger hamburger--elastic">
                  <div class="hamburger-box">
                    <div class="hamburger-inner"></div>
                  </div>
                </div>
            </div>
            <div class="container">
                <div class="row d-flex justify-content-center">
                    <div class="menu-wrap">
                        <div class="col-12 menu-sidebar display-6">
                            <ul class="menu navbar-nav ml-auto">
                                <li class="nav-item"><a href="./index.php">ACCUEIL</a></li>
                                <li class="nav-item"><a href="#portfolio">PORTFOLIO</a></li>
                                <li class="nav-item"><a href="#contact">CONTACT</a></li>
                                <li class="nav-item"><a href="#about">QUI EST RABAH</a></li>
                            </ul>           
                        </div>
                        <hr class="light-yellow my-5">
                      <div class="col-12 d-flex justify-content-between wow fadeInDown">
                        <a href="http://www.linkedin.com/in/rabah-a-44062b5b" data-delay="50" target="new"><i class="fab fa-linkedin-in fa-2x text-jaune"></i></a>
                        <a href="https://www.instagram.com/rabahbook/?hl=fr" data-delay="50" target="new"><i class="fab fa-instagram fa-2x text-jaune"></i></a>
                        <i class="fab fa-behance fa-2x text-jaune"></i>
                        <i class="fab fa-facebook-f fa-2x text-jaune"></i>
                      </div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

i found a solution but one link is not working. For the moment it works. Thanks for your help.

var $hamburger = $(".hamburger"),
    $menuWrap = $('.menu-wrap');

function sideNavBar() {
    $hamburger.on("click", function (e) {
        $hamburger.toggleClass("is-active");
        // Do something else, like open/close menu
        $menuWrap.toggleClass('menu-show');
        $hamburger.click(function () {
            $(this).next().slideToggle(300);
        });
        e.stopPropagation();
        return false;
    });
    $('*:not(.hamburger)').on('click', function () {
        $menuWrap.removeClass('menu-show');
        $hamburger.removeClass('is-active');

    });

}

sideNavBar();