El resultado debería ser un menú de hamburguesas con diapositivas desde la derecha al hacer clic en el icono.

Este es el código para el menú principal donde lo traduzco a la derecha al 100 % y cuando hago clic en el icono se traduce de nuevo al 0 % y lo muestra en la pantalla.

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; }

el 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'; }

El problema es que cuando está cerrado, todavía es posible que el usuario se desplace horizontalmente hacia la derecha. Eso no debería ser posible ya que el menú debería estar oculto y no debería haber posibilidad de desplazarse horizontalmente.