Tengo un menú lateral creado con html y css, que únicamente se cierra y se abre haciendo clic en una de las opciones o haciendo clic en al botón de "cerrar"
Me gustaría hacer que se cierre cuando haces clic en algún lugar fuera del menú.
Usando este código de Javascript, usanto la propagación, consigo que al darle fuera del menu, desaparezca el boton de Cerrar. Creo que pongo las clases donde no tocan.
(El código javascript, es el que me ha facilitado "Hernán Garcia" del siguiente enlace: es.stackoverflow.com/a/524685/212120
Gracias
<div id="sidemenu" class="menu-collapsed">
<!-- header -->
<div id="header">
<div id="title"><span></span></div>
<div id="menu-btn">
<p class="hamburger-btn btn-collapsed"><i class="fa-solid fa-bars"></i> Menú</p>
<p class="hamburger-btn btn-expanded boton"><i class="fa-solid fa-xmark"></i> Cerrar</p>
</div>
</div>
<!-- titular -->
<div id="titular">
<div id="title-menu"><span>Descubre Cómo Generar Negocio y Autoridad con<br> Copywriting y Marketing de Contenidos</span></div>
</div>
<!-- ITEMS -->
<div id="menu-items">
<div class="desplegables-menu">
<div class="row no-margin-negative">
<div class="col-md-12 col-sm-12">
<h5 class="titulo-desplegable-open pregunta white-bkg-collapse text-left">1. Escribe Copy de Alta Conversión</h5>
<div class="respuesta" aria-hidden="true">
<p>Fórmate con una habilidad de alta demanda en el mercado digital. Aprende a crear un mensaje persuasivo, auténtico y diferenciador, que inspire confianza e incremente tus ventas.</p>
<hr class="hr-menu">
<a class="link-active" data-toggle="modal" data-target="#menuModal">Curso Gratis de Copywriting</a>
<a href="https://ivofiz.com/escuela-de-copywriting/" class="links-menu">Escuela de Copywriting</a>
<a href="" class="links-menu">Acceso de Alumnado</a>
<a href="https://ivofiz.com/blog-de-copywriting/" class="links-menu">Blog de Copywriting</a>
<a href="https://ivofiz.com/cursos-copywriting/" class="links-menu">Cursos de Copywriting Online</a>
</div>
</div>
</div>
</div>
document.querySelector('.boton').addEventListener('click', ()=>{
event.stopPropagation();
document.querySelector('.menu').classList.toggle('show')
})
window.onclick = function (e) {
document.querySelector('.menu').classList.remove('show')
}