Merge branch 'ts-mobileHamburgerMenuScrolling' into 'master'

Fix hamburgerMenu scrolling in mobile (on Interface)

See merge request hedera/myhbarwallet!373

src/components/HeaderHamburgerButton.vue

@@ -35,8 +35,14 @@ export default createComponent({
             return props.isOpen ? `bar-${ind}-anim` : `bar-${ind}`;
         }
 
+        function setHamburgerMenuIsOpenOnBody(open: boolean): void {
+            console.log(open);
+            document.body.classList.toggle("ham-menu-is-open", open);
+        }
+
         function handleToggle(): void {
             context.emit("toggle", !props.isOpen);
+            setHamburgerMenuIsOpenOnBody(!props.isOpen);
         }
 
         return {

src/components/HeaderHamburgerMenu.vue

@@ -168,6 +168,11 @@ nav {
 
 .logout-container {
     margin-inline-end: 10px;
+    padding-block: 5px;
+
+    @supports (-webkit-overflow-scrolling: touch) {
+        padding-block-end: 100px;
+    }
 }
 
 .logout {
@@ -184,7 +189,8 @@ nav {
 
 .nav-open {
     box-shadow: 0 calc(100vh - 85px) 0 calc(100vh - 85px) rgba(0, 0, 0, 0.8);
-    height: 100vh;
+    height: calc(100vh - 85px);
+    overflow-y: scroll;
 
     @media (prefers-reduced-motion) {
         transition: none;

src/main.css

@@ -57,4 +57,12 @@ body {
     &.modal-is-open {
         overflow: hidden;
     }
+
+    &.ham-menu-is-open {
+        overflow: hidden;
+
+        @supports (-webkit-overflow-scrolling: touch) {
+            position: fixed;
+        }
+    }
 }