Como fechar menu clicando fora ou em qualquer parte da página?

alguém poderia me ajudar a fazer com que esse menu feche ao clicar fora, ou em qualquer parte da página?

pois está fechando só se clicar buttom do menu.

document.querySelector('.button').addEventListener('click', () => {   document.querySelector('.sidebar').classList.toggle('isOpen'); });
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');  *, *::before, *::after {   margin: 0;   padding: 0;   box-sizing: border-box; }  html, body {   height: 100vh; }  body {   font: 500 .9rem/1 'Avenir Next', sans-serif;   color: #333;   background: #fff; }  .wrapper {   display: flex;   min-height: 100%; }  .sidebar {   position: absolute;   width: 220px;   padding: 20px;   transform: translateX(0);   transition: transform .3s;   background: #2f323e;   height: 100vh; }  .content {   flex: 1;   padding: 50px;   background: #fff;   box-shadow: 0 0 5px #000;   transform: translateX(0);   transition: transform .3s; }  .sidebar.isOpen {   transform: translateX(-220px); }  .button {   cursor: pointer; }  .button svg {   width: 40px; }  .button line {   stroke: black;   stroke-width: 5; }  h1 {   margin-top: 25px;   font-size: 40px;   font-weight: 400; }  .nav {   list-style: none; }  .nav li a {   position: relative;   display: block;   margin-bottom: 5px;   padding: 16px 0 16px 50px;   color: #fff;   border-radius: 4px;   cursor: pointer; }  .nav li a:hover, .nav li a.active {   background: rgba(0,0,0,.3); }  .nav li a::before {   font: 14px fontawesome;   position: absolute;   top: 15px;   left: 20px; }  .nav li:nth-child(1) a::before { content: '\f00a'; } .nav li:nth-child(2) a::before { content: '\f012'; } .nav li:nth-child(3) a::before { content: '\f0e8'; } .nav li:nth-child(4) a::before { content: '\f0c3'; } .nav li:nth-child(5) a::before { content: '\f022'; } .nav li:nth-child(6) a::before { content: '\f115'; } .nav li:nth-child(7) a::before { content: '\f085'; } .nav li:nth-child(8) a::before { content: '\f023'; left: 23px; }
<div class="wrapper">   <div class="sidebar isOpen">        <a class="button" style="margin: 0px 0px 0px 215px;  position: absolute;">           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">             <line x1="0" y1="20" x2="100" y2="20" />             <line x1="0" y1="50" x2="100" y2="50" />             <line x1="0" y1="80" x2="100" y2="80" />          </svg>         </a>              <ul class="nav">       <li><a class="active">Dashboard</a></li>       <li><a>Charts</a></li>       <li><a>Milestones</a></li>       <li><a>Lab</a></li>       <li><a>Preview</a></li>       <li><a>Assets</a></li>       <li><a>Settings</a></li>       <li><a>Logout</a></li>     </ul>    </div>     </div>

Como envio por correo una parte del HTML de mi pagina

Necesito enviar por correo un recibo de una compra.

Digamos que se tiene una lista de items que el usuario desea comprar, deseo pasar por correo los datos de esa orden, Nombre de los items, descripcion y otros datos, cantidad, sub-total y el total.

Tengo un metodo el cual probe con un boton y me envia un correo con un mensaje ya creado de prueba en formato html:

public ActionResult ConfirmarOrden() {      MailMessage mail = new MailMessage();      SmtpClient SmtpServer = new SmtpClient("smtp.gmail.com");      mail.From = new MailAddress("MICORREO@gmail.com");      mail.To.Add("CORREODELCLIENTE@gmail.com");      mail.Subject = "Nueva orden";      mail.Body =      "<table border striped><thead><tr><td>Preview</td><td>Name a Door</td><td>Outside profile</td><td>Inside profile</td><td>Flat Panel</td><td>Quantity</td><td>Sub-Total</td><td>Total Price</td></tr></thead><tbody><tr><td><img src=@i.Picture></td><td>@i.Material.Description</td><td>@i.OutsideEdgeProfile.Description</td><td>@i.InsideEdgeProfile.Description</td><td>@i.PanelMaterial.Description</td><td>@i.Quantity</td></tr></tbody></table>";       mail.IsBodyHtml = true;        SmtpServer.Port = 800;       SmtpServer.Credentials = new System.Net.NetworkCredential("MICORREO@gmail.com", "CLAVEDEMICORREO");       SmtpServer.EnableSsl = true;       SmtpServer.Send(mail);       return Json(true, JsonRequestBehavior.AllowGet); } 

Entonces como haria para pasar por el mail.Body el html de mi pagina que contiene la orden que se esta procesando, o si hago la consulta a la bd sobre esa orden como envio luego eso por el correo.

Me gusta lo del formato en HTML porque el correo llega en un tabla muy ordenado y es lo que busco.

Asi me llega al correo

¿Parte de mi codigo solo se aplica a 2 de 5 elementos que quería que afectase?

tengo un pequeño problema. Tengo esta parte de código:

var LibrosXestante= 3;  var book = [{         title: "The Giver 1",         autor: "Manueh",         stars: 4     },     {         title: "The Giver 2",         Autor: "Jesu",         stars: 3     },     {         title: "The Giver 3",         autor: "KIKO",         stars: 1     },     {         title: "The Giver 4",         Autor: "jaimie",         stars: 5     },     {         title: "The Giver 5",         Autor: "jijon",         stars: 4 }];  // Pintar las estanterías var y = 140;    //Posición de la primera estantería.  for (var i = 0; i < book.length/LibrosXestante; i++) {     fill(173, 117, 33);     rect(0, y, width, 10);     y = y + 150;    //bajar la posición de la estantería }   //Variable para contar los libros impresos var booksPrinted = 0;  //Función para pintar libro var pintarLibro = function(xBook,yBook) {     fill(214, 255, 219);     rect(10 + xBook, yBook, 90, 115);      fill(0, 0, 0);     text(book[i].title, 15 + xBook, yBook+5, 60, 100);     text(book[i].autor, 15 + xBook, yBook+35, 60, 100);     //Si no hemos llegado al máximo de libros por estante sumamos uno     if(booksPrinted<LibrosXestante){         booksPrinted++;     } };  //Función para pintar las estrellas var pintarEstrellas = function(i,yStars,xStars){     for (var k = 0; k < book[i].stars; k++) {         image(getImage("cute/Star"), (xStars + k * 15), yStars, 20, 30);     } };  var yBook = 25; var xBook = 0; var yStars = 102; var xStars = 15;  // draw books for (var i = 0; i < book.length; i++) {     //Si hemos llegado al máximo de libros impresos saltamos de estante      //y reinicializamos las variables     if(booksPrinted>=LibrosXestante){         yBook = yBook + 150;         xBook = 0;         yStars = yStars + 150;         xStars = 15;         //establecemos libros impresos para la nueva estantería         booksPrinted = 0;     }     pintarLibro(xBook,yBook);     pintarEstrellas(i,yStars,xStars);     xStars = xStars + 100;     xBook = xBook + 100; } 

He estado haciendo algunos cambios, y a la hora de añadir un autor en los objetos del array book. Al imprimirlo solo me sale en los libros 1 y 3 ¿alguien sabe porque? dejo foto: introducir la descripción de la imagen aquí