JavaScript: creare un menu laterale a comparsa con i CSS

Con JavaScript e CSS possiamo implementare un menu laterale a comparsa.

Usiamo questi stili CSS:

#menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100%;
    transition: all .3s ease-in;
    transform: translate3d(-200px, 0, 0);
    background-color: #fff;
}

#menu.open {
    transform: translate3d(0, 0, 0);
}

Quindi con JavaScript avremo:

'use strict';

let toggleBtn = document.querySelector('#toggle-menu');
let menu = document.querySelector('#menu');

toggleBtn.addEventListener('click', e => {
    e.preventDefault();
    menu.classList.toggle('open');
});