refactor(menu): use left/right instead

Author: thetaPC

core/src/components/menu/menu.scss

@@ -37,12 +37,11 @@
 
 
 .menu-inner {
-  @include transform(translateX(-9999px));
-
-  will-change: transform;
-
   display: flex;
   position: absolute;
+  right: unset;
+  /* stylelint-disable property-disallowed-list */
+  left: -100%; /* Hide offscreen for left-sided menu */
 
   flex-direction: column;
   justify-content: space-between;
@@ -55,6 +54,8 @@
   min-height: var(--min-height);
   max-height: var(--max-height);
 
+  transform: none; /* Avoid using transform */
+
   background: var(--background);
 
   contain: strict;

core/src/utils/menu-controller/animations/overlay.ts

@@ -27,7 +27,7 @@ export const menuOverlayAnimation = (menu: MenuI): Animation => {
     openedX = '0px';
   }
 
-  menuAnimation.addElement(menu.menuInnerEl!).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
+  menuAnimation.addElement(menu.menuInnerEl!).fromTo('left', `${closedX}`, `${openedX}`);
 
   const mode = getIonMode(menu);
   const isIos = mode === 'ios';