How to Make SideNav close Outside Click

Question

Im Trying to make this Sidenav Close when You Click outside of it.

var clicked=0; function myFunction() { if (clicked==0) {
document.getElementById("mystart").style.width="333px"; clicked=1; } else {
document.getElementById("mystart").style.width="0"; clicked=0; } }

.start {
    width: 0px;
    position: fixed;
    z-index: 1;
    height: 350px;
    left: 0px;
    top: 65px;
    overflow: hidden;
    transition: 0s;
    background-color: rgba(4, 4, 7, 0.87);
}

<a href="#" onclick="myFunction()"
  ><img
    src="images/icon-start.png"
    width="200"
    height="64"
    alt="iconstart"
    border="0"
    onmouseover="this.src='images/icon-start-hover.png'"
    onmouseout="this.src='images/icon-start.png'"
/></a>
<div id="mystart" class="start">
  <br />
  <table width="80%" border="0" align="center" cellpadding="3" cellspacing="5">
    <tbody>
      <tr>
        <td style="text-align: center">
          <button class="start-buttons" id="update12">FRONTPAGE</button>
        </td>
      </tr>
      <tr>
        <td style="text-align: center">
          <button class="start-buttons" id="update11">DOWNLOADS</button>
        </td>
      </tr>
      <tr>
        <td style="text-align: center">
          <button class="start-buttons" id="update10">LINKS</button>
        </td>
      </tr>
      <tr>
        <td style="text-align: center">
          <button class="start-buttons" id="update7">CONSOLE MUSIC</button>
        </td>
      </tr>
      <tr>
        <td style="text-align: center">
          <button class="start-buttons" id="update9">GOODS 4 SALE</button>
        </td>
      </tr>
      <tr>
        <td style="text-align: center">
          <button class="start-buttons" id="update8">CONTACT</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Im Trying to make this Sidenav Close when You Click outside of it. This is what i have tried so far . Im Trying to make this Sidenav Close when You Click outside of it. This is what i have tried so far .