The result should be a hamburger menu with slides in from the right on clicking the icon.

This is the code for the main menu where I translate it to the right 100% and when I click on the icon it translates back to 0% bringing it on screen

HTML

<div id="mobilenav" class="mobile-nav">
  <div class="mobile-nav-header">
    
    </div>
    <div class="hamburger">
      <button (click)="closeMenu()">
        <img src="../../assets/icons/close-menu.svg" alt="" />
      </button>
    </div>
  </div>
  <ul class="links">
    
  </ul>
  <div class="socials">
    
  </div>
</div>

.mobile-nav {
  height: 100vh;
  top: 0;
  position: absolute;
  transform: translateX(100%);
  right: 0;
  transition: 0.5s;
  background: white;
  z-index: 99;
}

The JS

openMenu() {
    var mobile_menu = document.getElementById('mobilenav');
    mobile_menu!.style.transform = 'translateY(0px)';
    // mobile_menu!.style.display = 'block';
  }
  closeMenu() {
    var mobile_menu = document.getElementById('mobilenav');
    mobile_menu!.style.transform = 'translateX(100%)';
    // mobile_menu!.style.display = 'none';
  }

The issue is that when closed, it is still possible for the user to scroll horizontally to the right. That should not be possible as the menu should be hidden and there should be no possibility to scroll horizontally.