Account menu overlays UI instead of pushing it

frontend/src/app/components/master-page/master-page.component.html

@@ -90,7 +90,7 @@
   <div class="flex-grow-1 d-flex flex-column">
     <app-testnet-alert *ngIf="network.val === 'testnet' || network.val === 'signet'"></app-testnet-alert>
 
-    <main style="min-width: 375px" [style]="menuOpen ? 'max-width: calc(100vw - 225px)' : 'max-width: 100vw'">
+    <main style="min-width: 375px; max-width: 100vw">
       <router-outlet></router-outlet>
     </main>
 

frontend/src/app/components/menu/menu.component.scss

@@ -1,12 +1,12 @@
 .sidenav {
-  z-index: 1;
+  z-index: 10;
   background-color: transparent;
   width: 225px;
   height: calc(100vh - 65px);
-  position: sticky;
+  position: fixed;
   top: 65px;
-  transition: 0.25s;
-  margin-left: -250px;
+  left: -250px;
+  transition: left 0.25s;
   box-shadow: 5px 0px 30px 0px #000;
   padding-bottom: 20px;
   @media (max-width: 613px) {
@@ -26,7 +26,6 @@
 }
 
 .sidenav.open {
-  margin-left: 0px;
   left: 0px;
   display: block;
   background-color: #1d1f31;

frontend/src/app/components/start/start.component.html

@@ -13,8 +13,6 @@
 
 <div class="blockchain-wrapper" [class.time-ltr]="timeLtr" [class.time-rtl]="!timeLtr" #blockchainWrapper>
   <div id="blockchain-container" [dir]="timeLtr ? 'rtl' : 'ltr'" #blockchainContainer
-    [class.menu-open]="menuOpen"
-    [class.menu-closing]="menuSliding && !menuOpen"
     [class.with-menu]="hasMenu"
     (mousedown)="onMouseDown($event)"
     (pointerdown)="onPointerDown($event)"

frontend/src/app/components/start/start.component.scss

@@ -11,16 +11,6 @@
   transform: translateX(0px);
   transition: transform 0;
 
-  &.menu-open {
-    transform: translateX(-112.5px);
-    transition: transform 0.25s;
-  }
-
-  &.menu-closing {
-    transform: translateX(0px);
-    transition: transform 0.25s;
-  }
-
   &.with-menu {
     width: calc(100% + 120px);
   }

frontend/src/app/components/start/start.component.ts

@@ -32,7 +32,6 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
   @ViewChild('blockchainWrapper', { static: true }) blockchainWrapper: ElementRef;
   @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
   resetScrollSubscription: Subscription;
-  menuSubscription: Subscription;
 
   isMobile: boolean = false;
   isiOS: boolean = false;
@@ -56,9 +55,6 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
   scrollLeft: number = null;
 
   chainWidth: number = window.innerWidth;
-  menuOpen: boolean = false;
-  menuSliding: boolean = false;
-  menuTimeout: number;
 
   hasMenu = false;
 
@@ -165,12 +161,6 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
       } 
     });
 
-    this.menuSubscription = this.stateService.menuOpen$.subscribe((open) => {
-      if (this.menuOpen !== open) {
-        this.menuOpen = open;
-        this.applyMenuScroll(this.menuOpen);
-      }
-    });
   }
 
   ngAfterViewChecked(): void {
@@ -223,15 +213,6 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
     }
   }
 
-  applyMenuScroll(opening: boolean): void {
-    this.menuSliding = true;
-    window.clearTimeout(this.menuTimeout);
-    this.menuTimeout = window.setTimeout(() => {
-      this.menuSliding = false;
-      this.cd.markForCheck();
-    }, 300);
-  }
-
   @HostListener('window:resize', ['$event'])
   onResize(): void {
     this.chainWidth = window.innerWidth;
@@ -518,6 +499,5 @@ export class StartComponent implements OnInit, AfterViewChecked, OnDestroy {
     this.markBlockSubscription.unsubscribe();
     this.blockCounterSubscription.unsubscribe();
     this.resetScrollSubscription.unsubscribe();
-    this.menuSubscription.unsubscribe();
   }
 }