☰

Off canvas

<div id="offcanvas">
  <div class="smokescreen"></div>
  <nav class="sidebar">
    <a class="btn-toggle">&#10060;</a>
  </nav>
  <div class="content">
    <a class="btn-toggle">&#9776;</a>
  </div>
</div>

#offcanvas .sidebar {
  padding: 30px;
  position: fixed;
  left: -250px;
  width: 250px;
  min-height: 100vh;
  transform: translate3d(0);
  transition: .3s ease all;
}

#offcanvas .sidebar.is-open {
  transform: translate3d(250px, 0, 0);
}

#offcanvas .smokescreen {
  width: 100vw;
  height: 100vh;
  background-color: rgba(33, 33, 33, 0.5);
  position: fixed;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.3s ease, opacity 0.3s ease;
}

#offcanvas .smokescreen.is-open {
  visibility: visible;
  opacity: 1;
}

#offcanvas .content {
  width: 100%;
  padding: 30px;
  min-height: 100vh;
}

let offCanvas = (function () {
  let container = document.getElementById('offcanvas');
  let divSidebar = container.querySelector('.sidebar');
  let divSmokescreen = container.querySelector('.smokescreen');

  let toggleSidenav = function () {
    divSidebar.classList.toggle('is-open');
    divSmokescreen.classList.toggle('is-open');
  };

  document.addEventListener("DOMContentLoaded", function () {
    let btnsToggle = document.querySelectorAll('.btn-toggle');
    btnsToggle.forEach(function (q) {
      q.onclick = toggleSidenav;
    });
    divSmokescreen.onclick = toggleSidenav;
  });

  // Adicionando evento para fechar o menu ao pressionar a tecla ESC
  document.addEventListener('keyup', function (e) {
    if ((e.keyCode == 27) && (divSidebar.classList.contains('is-open'))) {
      toggleSidenav();
    }
  });
})();