Sidebar menu close (Width:0) when click on body or swipe slide

I am trying to make a vertical slide menu for the mobile version. This side menu is open and close when I click specific button like (Openbtn) (Closebtn) and clicking anywhere in body tag including menubar.

I need a javascript code for side menu close when I clicked in body outside menubar (Side menu). Also it willbe helpful if is possible to close when I swipe menubar (side menu).

Below is my example for your reference:

function openNav() {
  console.log("open");
  document.getElementById("toggle_menu").style.width = "250px";
}

function closeNav() {
  document.getElementById("toggle_menu").style.width = "0";
}

document.addEventListener("click", function(){
  if( parseInt( $('#toggle_menu').css('width') ) > 0 ){
    document.getElementById("toggle_menu").style.width = "0";
  }
});


// For Child dropdown menu
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}

.toggle_menu {display:block; width:250px; top:0px; height:100%; background-color:#fff; box-shadow: 0 5px 5px rgba(0,0,0,.2);position: fixed; overflow-x: hidden; transition: 0.5s; z-index:1000;}
.title {width:100%; height:80px;}
.toggle_menu ul {list-style:none; margin:0; padding:0;}
.toggle_menu ul li {width:100%; height:40px; cursor:pointer;}
.toggle_menu ul li a {text-decoration:none; color: #666666; font-size:14px; display:block; padding: 10px 0px 0 50px; font-size: 14px; font-family:sans-serif;}
.toggle_menu ul li .sub-arrow:after { content:'\203A'; font-size:24px; color:#666666; float:right; margin-top:-20px; margin-right:30px; transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); }
.toggle_menu ul li:hover {background-color:#E8E6FF;}
.toggle_menu ul .dropdown-container {display:none; background-color: #E2E1FB;} 
.toggle_menu ul .dropdown-container a:before{ content:'\203A'; font-size: 15px; margin-right:10px; color: #666666; }

.closebtn {
  position: absolute;
  height:40px;
  width:50px;
  color:#000;
  border-radius:50%;
  text-align:center;
  padding-top:10px;
  border:6px solid #307DFE;
  font-size:24px;
  font-family: Arial, Helvetica, sans-serif;
  background: #70A9FE;
  right:10px;
  top:10px;
}
.closebtn:hover {border:6px solid #FF9900;}             

<span id="menu_bar" onClick="openNav()">Menu</span>

<!-- Slide Menu -->
<div class="toggle_menu" id="toggle_menu">
            <div class="title"><a href="javascript:void(0)" class="closebtn" onClick="closeNav()">X</a> </div> 
      <div class="sidenav">
        <ul>
          <li><a href="#">Home</a></li>
          <li class="dropdown-btn"><a href="#">Men's</a><span class="sub-arrow"></span></li>
            <ul class="dropdown-container">
              <li><a href="">Traditional Wear</a></li>
              <li><a href="">Top Wear</a></li>
              <li><a href="">Bottom Wear</a></li>
              <li><a href="">Footwear</a></li>
              <li><a href="">Bags</a></li>
              <li><a href="">Accessories</a></li>
             </ul>
          <li class="dropdown-btn"><a href="#">Women's</a><span class="sub-arrow"></span></li>
             <ul class="dropdown-container">
                <li><a href="">Traditional Wear</a></li>
                <li><a href="">Westen Wear</a></li>
                <li><a href="">Footwear</a></li>
                <li><a href="">Lingerie</a></li>
                <li><a href="">Bages</a></li>
                <li><a href="">Jewellery</a></li>
                <li><a href="">Accessories</a></li>
             </ul>
        </ul>
      </div>
</div>