Hide menu sidebar when clicking outside the bar or the button

Edit your js code to following

$('#menu-button').click(function(e){
    e.stopPropagation();
    $('#hide-menu').toggleClass('show-menu');
});

$('#hide-menu').click(function(e){
    e.stopPropagation();
});

$('body,html').click(function(e){
   $('#hide-menu').removeClass('show-menu');
});

Hope this will work.

Here is fiddle. http://jsfiddle.net/ex8ddv5q/1/

For a different take on it check this Fiddle

$('#menu-button').click(function (evt) {
    evt.stopPropagation();
    $('#hide-menu').toggleClass('show-menu');
});


$('body,html').click(function (e) {

    var container = $("#hide-menu");

    if (!container.is(e.target) && container.has(e.target).length === 0) {
        container.removeClass('show-menu');

    }
});

In case somebody comes here and is using Angular instead of JQuery, we got this to work with something similar to the above like this:

public toggleSideNav() {
    this.showSideNav = !this.showSideNav;
    console.log('show side nav', this.showSideNav);
    event.stopPropagation();
}

public hideSideNav() {
    this.showSideNav = false;
    console.log('hide side nav');
}

And this in the template:

<app-sidenav></app-sidenav>
<div class="main-body" (click)="applicationService.hideSideNav()">
    <router-outlet></router-outlet>
</div>