[dupre]

Рони, имелось в виду, что вы представили несколько вариантов исполнения по сути одной задачи — это интересно и очень познавательно, ведь появляется выбор. Например, можно взять:

window.addEventListener('DOMContentLoaded', function() {
  var body = document.querySelector('body');
  document.addEventListener("click", function(event){
          var target = event.target;
          if( target.closest(".sidenav") && !target.closest(".closebtn")) return;
          else if(target.closest("#main")) {event.preventDefault();
          body.classList.toggle("open")}
          else body.classList.remove("open");
      });
   });

сравнить например с:

window.addEventListener('DOMContentLoaded', function() {
  var sidenav = document.querySelector('.sidenav');
  document.addEventListener("click", function(event){
          var target = event.target;
          if( target.closest(".sidenav") && !target.closest(".closebtn")) return;
          else if(target.closest(".openclosebtn")) {event.preventDefault();
          sidenav.classList.toggle("open")}
          else sidenav.classList.remove("open");
      });
   });

и, если присмотреться разница очевидна. Например, строки 2 и 6. И это круто просто Спасибо !