Hide menu sidebar when clicking outside the bar or the button

Question

I am trying to make a menu like the semantic UI but I only achieved to click the menu button and open the menu and vice versa. I use toggle class to show the sidebar but I d

Answer 1

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: