Возможно ли присвоить на одну кнопку добавление и удаление класса?

Я пытаюсь оформить мобильную версию сайдбара.

Есть в мобильном виде гамбургер с классом .hamburger_button и затемненная область .mobile

position: fixed;
top: 0;
right: 0;
background: rgba(90, 90, 90, 0.9);
width: 88vw;
height: 100vh;
color: white;

которая изначально

transform: translateX(100%);
transition: transform 500ms ease-out;

но по нажатию на .hamburger_button я добавляю новый класс к .mobile

.open {
    transform: translateX(0);
}

в js это выглядит так:

var hamburgerButton = document.querySelector('.hamburger__button');
var mobileNav = document.querySelector('.mobile');
function openMobile() {
    mobileNav.classList.add('open');
}
function CloseMobile() {
    mobileNav.classList.remove('open');
}
hamburgerButton.addEventListener('click', openMobile);
mobileNav.addEventListener('click', CloseMobile);

Есть решение с добавлением нового блока,но цель заключается в том,чтобы по нажатию на гамбургер область выезжала и уезжала обратно.

А пока что она уезжает при любом нажатие на область .mobile, и почему это происходит мне понятно.