title: Close left-nav using Javascript when I click anywhere on the screen
body: <p>in my application I have a left navigation menu. The menu is basically a <code>&lt;div&gt;</code> which looks like this -</p>
  
  <pre><code>&lt;div id ="pdAppSidenav" style="display:none"&gt;
  Blah blah blah
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, this menu is not displayed by default. My webpage has an icon and I want that clicking on this icon should open the left navigation menu and re clicking the same icon should close the menu. I also want that when the menu is open, clicking anywhere on the screen should close it. </p>
  
  <p>Please note that the icon is represented as a <code>&lt;div&gt;</code> as follows - </p>
  
  <pre><code>&lt;div id="hamburgerIconId" class="hamburgerIcon"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>For this, i have written the following code -</p>
  
  <pre><code>function leftnav() {
    var collapse_sidebar = document.getElementById('pdAppSidenav');
    var  collapse_sidebar_icon = document.getElementById("hamburgerIconId");
      var isOpen="false"
          collapse_sidebar_icon.onclick = function() { 
              if(isOpen==="false"){
                  collapse_sidebar.style.display = "block";
              collapse_sidebar.style.width = "250px";
                  isOpen="true";
                  console.log("1");
              }
              else{
                  collapse_sidebar.style.display = "none";
              collapse_sidebar.style.width = "0px";
                  isOpen  = "false";
                  console.log("2");
              }
  
      }
          window.onclick = function() {
          if (isOpen==="true") {          
              collapse_sidebar.style.display = "none";
              collapse_sidebar.style.width = "0px";
              isOpen="false";
              console.log("3");
          }
          }
  </code></pre>
  
  <p>Now, when I click on the icon, it triggers both the onclick functions associated with the icon and the window which means that <code>1</code> and <code>3</code> are printed in the console. How do I achieve my desired result?</p>