title: Close the sidebar menu when click on body in mobile version
body: <p>I have this code working perfectly for desktop version. It closes the sidenav div when clicked outside after opening it (in the body).</p>
  
  <p>How should I make it work in the mobile version? It doesn't seem to recognize the javascript. Could someone help?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
  }
  
  function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
  }
  
  $('body').on('click', function(){
    if( parseInt( $('#mySidenav').css('width') ) &gt; 0 ){
      closeNav();
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      right: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
  }
  
  .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
  }
  
  .sidenav a:hover, .offcanvas a:focus{
      color: #f1f1f1;
  }
  
  .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="mySidenav" class="sidenav"&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
    &lt;a href="#"&gt;About&lt;/a&gt;
    &lt;a href="#"&gt;Services&lt;/a&gt;
    &lt;a href="#"&gt;Clients&lt;/a&gt;
    &lt;a href="#"&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Animated Sidenav Example&lt;/h2&gt;
  &lt;p&gt;Click on the element below to open the side navigation menu.&lt;/p&gt;
  &lt;span style="font-size:30px;cursor:pointer" onclick="openNav()"&gt;&amp;#9776; open&lt;/span&gt;
  &lt;p&gt;Click on the body area here to close the menu after opening it. However,
   it doesn't work on mobile version. &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>