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

Suppose if your sidebar width is 270px,check the mouse click coordinate.If it's greater give its style left attribute as -270px;

function handleMousePos(event) {
      var mouseClickWidth = event.clientX;
      if(mouseClickWidth>=270){
            document.getElementById("mySidenav").style.left='-270px'
           }
}

document.addEventListener("click", handleMousePos);

Here is my sample:https://codepen.io/johncy/pen/oMyzZr