Açılır menü boş alana tıklandığında geri kapanmıyor.

Arkadaşlar sitemde açılır ve kapanır menü var boşluk alanına tıklandığında menünün kapanmasını nasıl sağlayabilirim? Sitede yer alan kodlar şöyle

<script>
function openNav() {
var sidenav = document.getElementById("mySidenav"),
main = document.getElementById("main");
sidenav.style.width = sidenav.style.width == "250px" ? '0' : '250px';
main.style.marginLeft = main.style.marginLeft === "250px" ? '0' : '250px';
}


function myFunction(x) {
x.classList.toggle("change");
}
</script>

<div id="main">
<span style="cursorointer" onclick="openNav();">
<div class="container" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</span>
</div>

Mevcut kodların altına ekleyin
var main = document.getElementById("main");
main.addEventListener("click", function() {
var sidenav = document.getElementById("mySidenav");
if (sidenav.style.width === "250px") {
sidenav.style.width = "0";
main.style.marginLeft = "0";
}
});
Bu kodlar, "main" adlı elemente tıklandığında menünün kapandığını kontrol eder. Umarım yardımcı olabilmişimdir.

teşekkür ederim hocam da çalışmadı ne yazık ki

Sizdeki benim verdiğim kod eklenmiş son halini yazarmısınız buraya

<script>
function openNav() {
var sidenav = document.getElementById("mySidenav"),
main = document.getElementById("main");
sidenav.style.width = sidenav.style.width == "250px" ? '0' : '250px';
main.style.marginLeft = main.style.marginLeft === "250px" ? '0' : '250px';
}


function myFunction(x) {
x.classList.toggle("change");
}
var main = document.getElementById("main");
main.addEventListener("click", function() {
var sidenav = document.getElementById("mySidenav");
if (sidenav.style.width === "250px") {
sidenav.style.width = "0";
main.style.marginLeft = "0";
}
});


</script>