单击外部时如何关闭侧边栏？

Question

我发现了一个很棒的带有切换侧边栏的脚本，但我遇到了问题，如果我点击外部，我该如何关闭这个侧边栏？

HTML：

<div id="sidebar1" class="sidebar" aria-label="Main sidebar containing navigation links and some information" aria-hidden="true">
  <div class="sidebar__content">
    <span>whatever you want</span>
  </div>
</div>

<button data-toggle-sidebar="sidebar1">Toggle Sidebar</button>

CSS：

body {
  min-height: 100vh;
  padding: 10px;
}
/* SIDEBAR POSITION */
.sidebar {
  background-color: #f1f1f1;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  min-width: 300px;
}
.sidebar__content {
  padding: 8px;
}
/* SIDEBAR HIDDEN STATE */
.sidebar[aria-hidden="true"] {
  transition: 200ms;
  transform: translateX(100%);
}
/* SIDEBAR VISIBLE STATE */
.sidebar:not([aria-hidden]),
.sidebar[aria-hidden="false"] {
  transition: 200ms;
  transform: translateX(0);
}

JS：

document.querySelectorAll('[data-toggle-sidebar]').forEach(toggle => {
   toggle.addEventListener('click', e => {
     const sidebarID = toggle.dataset.toggleSidebar;
     const sidebarElement = sidebarID ? document.getElementById(sidebarID) : undefined;
     if (sidebarElement) {
        let sidebarState = sidebarElement.getAttribute('aria-hidden');
        sidebarElement.setAttribute('aria-hidden', sidebarState == 'true' ? false : true); 
     }
   });
});

当我点击外面的任何地方时如何关闭侧边栏？