Mobile menu

mobile-menu-actions.js

    /* Hamburher menu */
    const menu = document.querySelector('.mobile-menu'); /* Aside menu */
    const burger = document.querySelector('.burger'); /* desktop btn aside menu  */
    const menuClose = document.querySelector('.mobile-menu__closebtn'); /* close btn for aside menu */
    const overlay = document.querySelector('.overlay'); /* overlay for aside menu */

    /* lock screen scroll */
    const lockScroll = () => {
        document.body.classList.add('lock');
    }
    /* unlock screen scroll */
    const unlockScroll = () => {
        document.body.classList.remove('lock');
    }

    /* Open menu */
    burger.addEventListener('click', () => {
        burger.classList.add('hide');
        menu.classList.add('open');
        overlay.classList.add('open');
        lockScroll();
    });
    /* Close aside menu */
    menuClose.addEventListener('click', () => {
        burger.classList.remove('hide');
        menu.classList.remove('open');
        overlay.classList.remove('open');
        unlockScroll();
    });
    /* Remove overlay and unlock screen scroll */
    overlay.addEventListener('click', () => {
        burger.classList.remove('hide');
        menu.classList.remove('open');
        overlay.classList.remove('open');
        unlockScroll();
    });
    /* End of Hamburher menu */

mobile-menu-styles.css

.overlay {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0, 0.1);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
}
.overlay.open {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s;
}
.lock {
	overflow: hidden;
}
.burger.hide {
    opacity: 0;
    transition: opacity .25s ease-out;
}
.mobile-menu.open {
    width: 355px;
    transition: width .25s ease-out;
}

mobile-menu.html

<div class="overlay"></div>

<div class="burger">
  Menu
</div>

<div class="mobile-menu">
  some menu
</div>