diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss index d2f21b97a..ebf052bff 100644 --- a/app/src/assets/scss/component/_menu.scss +++ b/app/src/assets/scss/component/_menu.scss @@ -50,7 +50,7 @@ .b3-menu { &__submenu { top: 48px; - left: 0; + left: 100vw; bottom: 0; max-height: none; right: 0; @@ -58,6 +58,9 @@ border: 0; padding: 0; border-radius: 0; + width: 100%; + transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms; + display: block; & > .b3-menu__item:first-child { border-top: .5px solid var(--b3-theme-background-light); @@ -81,8 +84,14 @@ border-top: .5px solid var(--b3-theme-background-light); } - &--show > .b3-menu__submenu--row { - width: 100%; + &--show { + & > .b3-menu__submenu { + transform: translateX(-100vw); + } + + & > .b3-menu__submenu--row { + width: 100%; + } } &--readonly { diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts index 74057e832..19199cacb 100644 --- a/app/src/menus/Menu.ts +++ b/app/src/menus/Menu.ts @@ -24,7 +24,10 @@ export class Menu { if (lastShowElements.length > 0) { lastShowElements[lastShowElements.length - 1].classList.remove("b3-menu__item--show"); } else { - this.remove(); + this.element.style.transform = ""; + setTimeout(() => { + this.remove(); + }, Constants.TIMEOUT_DBLCLICK); } return; }