From 2da31c4d4a0fa110c336d0694f4a7491e7c2272e Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Wed, 23 Aug 2023 19:59:54 +0900
Subject: [PATCH] Slide blockchain to compensate for menu

---
 .../src/app/components/menu/menu.component.ts |  1 +
 .../app/components/start/start.component.html |  2 +
 .../app/components/start/start.component.scss | 14 +++++++
 .../app/components/start/start.component.ts   | 38 ++++++++++++-------
 frontend/src/app/services/state.service.ts    |  1 +
 5 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/menu/menu.component.ts b/frontend/src/app/components/menu/menu.component.ts
index d12bbe47e..f071a7c0a 100644
--- a/frontend/src/app/components/menu/menu.component.ts
+++ b/frontend/src/app/components/menu/menu.component.ts
@@ -68,6 +68,7 @@ export class MenuComponent implements OnInit {
 
   hambugerClick() {
     this.navOpen = !this.navOpen;
+    this.stateService.menuOpen$.next(this.navOpen);
   }
 
   @HostListener('window:click', ['$event'])
diff --git a/frontend/src/app/components/start/start.component.html b/frontend/src/app/components/start/start.component.html
index de8d778d1..709a230d9 100644
--- a/frontend/src/app/components/start/start.component.html
+++ b/frontend/src/app/components/start/start.component.html
@@ -12,6 +12,8 @@
 
 <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"
     (mousedown)="onMouseDown($event)"
     (pointerdown)="onPointerDown($event)"
     (touchmove)="onTouchMove($event)"
diff --git a/frontend/src/app/components/start/start.component.scss b/frontend/src/app/components/start/start.component.scss
index f23235035..dff9cb0e7 100644
--- a/frontend/src/app/components/start/start.component.scss
+++ b/frontend/src/app/components/start/start.component.scss
@@ -6,6 +6,20 @@
   overflow-y: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  width: calc(100% + 120px);
+
+  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;
+  }
 }
 
 #blockchain-container::-webkit-scrollbar {
diff --git a/frontend/src/app/components/start/start.component.ts b/frontend/src/app/components/start/start.component.ts
index 89d4d9194..d929097d4 100644
--- a/frontend/src/app/components/start/start.component.ts
+++ b/frontend/src/app/components/start/start.component.ts
@@ -30,7 +30,8 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
   blockCounterSubscription: Subscription;
   @ViewChild('blockchainWrapper', { static: true }) blockchainWrapper: ElementRef;
   @ViewChild('blockchainContainer') blockchainContainer: ElementRef;
-  resetScrollSubscription: Subscription; 
+  resetScrollSubscription: Subscription;
+  menuSubscription: Subscription;
 
   isMobile: boolean = false;
   isiOS: boolean = false;
@@ -52,6 +53,9 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
 
   private resizeObserver: ResizeObserver;
   chainWidth: number = window.innerWidth;
+  menuOpen: boolean = false;
+  menuSliding: boolean = false;
+  menuTimeout: number;
 
   constructor(
     private stateService: StateService,
@@ -74,10 +78,10 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
       this.dynamicBlocksAmount = Math.min(this.blockCount, this.stateService.env.KEEP_BLOCKS_AMOUNT, 8);
       this.firstPageWidth = 40 + (this.blockWidth * this.dynamicBlocksAmount);
       if (this.blockCount <= Math.min(8, this.stateService.env.KEEP_BLOCKS_AMOUNT)) {
-        this.onResize(this.chainWidth);
+        this.onResize();
       }
     });
-    this.onResize(this.chainWidth);
+    this.onResize();
     this.updatePages();
     this.timeLtrSubscription = this.stateService.timeLtr.subscribe((ltr) => {
       this.timeLtr = !!ltr;
@@ -156,15 +160,12 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
       } 
     });
 
-    if ('ResizeObserver' in window && this.blockchainWrapper?.nativeElement) {
-      this.resizeObserver = new ResizeObserver(entries => {
-        const newChainWidth = entries[0].contentRect.width;
-        if (newChainWidth != this.chainWidth) {
-          this.onResize(newChainWidth);
-        }
-      });
-      this.resizeObserver.observe(this.blockchainWrapper.nativeElement);
-    }
+    this.menuSubscription = this.stateService.menuOpen$.subscribe((open) => {
+      if (this.menuOpen !== open) {
+        this.menuOpen = open;
+        this.applyMenuScroll(this.menuOpen);
+      }
+    });
   }
 
   onMempoolOffsetChange(offset): void {
@@ -185,8 +186,16 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
     }
   }
 
-  onResize(width): void {
-    this.chainWidth = width;
+  applyMenuScroll(opening: boolean): void {
+    this.menuSliding = true;
+    window.clearTimeout(this.menuTimeout);
+    this.menuTimeout = window.setTimeout(() => {
+      this.menuSliding = false;
+    }, 300);
+  }
+
+  onResize(): void {
+    this.chainWidth = window.innerWidth;
     this.isMobile = this.chainWidth <= 767.98;
     let firstVisibleBlock;
     let offset;
@@ -472,5 +481,6 @@ export class StartComponent implements OnInit, OnDestroy, DoCheck {
     this.markBlockSubscription.unsubscribe();
     this.blockCounterSubscription.unsubscribe();
     this.resetScrollSubscription.unsubscribe();
+    this.menuSubscription.unsubscribe();
   }
 }
diff --git a/frontend/src/app/services/state.service.ts b/frontend/src/app/services/state.service.ts
index 96529033c..0e4163159 100644
--- a/frontend/src/app/services/state.service.ts
+++ b/frontend/src/app/services/state.service.ts
@@ -147,6 +147,7 @@ export class StateService {
   rateUnits$: BehaviorSubject<string>;
 
   searchFocus$: Subject<boolean> = new Subject<boolean>();
+  menuOpen$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   constructor(
     @Inject(PLATFORM_ID) private platformId: any,