From 2c6f210e8ef0b823c14724d1b6c4ef4fb83eb3d1 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Mon, 18 Mar 2024 16:49:33 +0900
Subject: [PATCH 1/2] Account menu overlays UI instead of pushing it

---
 .../master-page/master-page.component.html    |  2 +-
 .../app/components/menu/menu.component.scss   |  9 ++++-----
 .../app/components/start/start.component.html |  2 --
 .../app/components/start/start.component.scss | 10 ----------
 .../app/components/start/start.component.ts   | 20 -------------------
 5 files changed, 5 insertions(+), 38 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index da0bbfcea..09ba65044 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/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>
 
diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss
index 99377a564..a4094537b 100644
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/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;
diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html
index b61187ab4..e53692837 100644
--- a/frontend/src/app/components/start/start.component.html
+++ b/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)"
diff --git a/frontend/src/app/components/start/start.component.scss b/frontend/src/app/components/start/start.component.scss
index 372327f99..e321b8d6f 100644
--- a/frontend/src/app/components/start/start.component.scss
+++ b/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);
   }
diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts
index b05d163e3..3f28891e2 100644
--- a/frontend/src/app/components/start/start.component.ts
+++ b/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();
   }
 }

From 393181f753042475326ad12dacc0db4c4d7d2484 Mon Sep 17 00:00:00 2001
From: natsoni <natsoni@protonmail.com>
Date: Thu, 21 Mar 2024 13:46:03 +0900
Subject: [PATCH 2/2] Set absolute menu in sticky header by @mononaut

---
 .../src/app/components/master-page/master-page.component.html   | 2 +-
 frontend/src/app/components/menu/menu.component.scss            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/master-page/master-page.component.html b/frontend/src/app/components/master-page/master-page.component.html
index 09ba65044..fd7319b01 100644
--- a/frontend/src/app/components/master-page/master-page.component.html
+++ b/frontend/src/app/components/master-page/master-page.component.html
@@ -81,10 +81,10 @@
     <app-search-form [hamburgerOpen]="user != null" class="search-form-container" location="top" (searchTriggered)="collapse()"></app-search-form>
   </div>
 </nav>
+<app-menu *ngIf="servicesEnabled" [navOpen]="menuOpen" (loggedOut)="onLoggedOut()" (menuToggled)="menuToggled($event)"></app-menu>
 </header>
 
 <div class="d-flex" style="overflow: clip">
-  <app-menu *ngIf="servicesEnabled" [navOpen]="menuOpen" (loggedOut)="onLoggedOut()" (menuToggled)="menuToggled($event)"></app-menu>
   <div *ngIf="!servicesEnabled" class="empty-sidenav"><!-- empty sidenav needed to push footer down the screen --></div>
 
   <div class="flex-grow-1 d-flex flex-column">
diff --git a/frontend/src/app/components/menu/menu.component.scss b/frontend/src/app/components/menu/menu.component.scss
index a4094537b..8a2e55c20 100644
--- a/frontend/src/app/components/menu/menu.component.scss
+++ b/frontend/src/app/components/menu/menu.component.scss
@@ -3,7 +3,7 @@
   background-color: transparent;
   width: 225px;
   height: calc(100vh - 65px);
-  position: fixed;
+  position: absolute;
   top: 65px;
   left: -250px;
   transition: left 0.25s;