Add restore scroll position on user-dropdown anchors links and scroll to top on active sub-menu links (#3066)

* Add restore scroll position on router same url

* Remove settings top anchor

* Add scrollToTop on active links fixed sub-menu

* Add restore scroll position on notification avatar links

* Toggle menu and close pophover when click on active dropdown menu-left link

* Add onSameUrlRestoreScrollPosition on user dropdown channels link

* Same behavior scrollTop and scroll to anchor everywhere

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

1 files changed, 30 insertions, 3 deletions

diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts
index 3d6cbda24..f9a0a9f57 100644
--- a/client/src/app/menu/menu.component.ts
+++ b/client/src/app/menu/menu.component.ts
@@ -2,7 +2,8 @@ import { HotkeysService } from 'angular2-hotkeys'
 import * as debug from 'debug'
 import { switchMap } from 'rxjs/operators'
 import { Component, OnInit, ViewChild } from '@angular/core'
-import { AuthService, AuthStatus, AuthUser, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
+import { Router } from '@angular/router'
+import { AuthService, AuthStatus, AuthUser, MenuService, RedirectService, ScreenService, ServerService, UserService } from '@app/core'
 import { LanguageChooserComponent } from '@app/menu/language-chooser.component'
 import { QuickSettingsModalComponent } from '@app/modal/quick-settings-modal.component'
 import { ServerConfig, UserRight, VideoConstant } from '@shared/models'
@@ -43,8 +44,10 @@ export class MenuComponent implements OnInit {
     private serverService: ServerService,
     private redirectService: RedirectService,
     private hotkeysService: HotkeysService,
-    private screenService: ScreenService
-    ) { }
+    private screenService: ScreenService,
+    private menuService: MenuService,
+    private router: Router
+  ) { }
 
   get isInMobileView () {
     return this.screenService.isInMobileView()
@@ -192,6 +195,30 @@ export class MenuComponent implements OnInit {
     return this.languages.find(lang => lang.id === localeId).label
   }
 
+  onSameUrlRestoreScrollPosition (link: HTMLAnchorElement) {
+    const linkURL = link.getAttribute('href')
+    const linkHash = link.getAttribute('fragment')
+
+    // On same url without fragment restore top scroll position
+    if (!linkHash && this.router.url.includes(linkURL)) {
+      window.scrollTo({
+        left: 0,
+        top: 0,
+        behavior: 'smooth'
+      })
+    }
+
+    // On same url with fragment restore anchor scroll position
+    if (linkHash && this.router.url === linkURL) {
+      const anchor = document.getElementById(link.getAttribute('fragment'))
+      anchor.scrollIntoView({ behavior: 'smooth', inline: 'nearest' })
+    }
+
+    if (this.screenService.isInSmallView()) {
+      this.menuService.toggleMenu()
+    }
+  }
+
   private buildUserLanguages () {
     if (!this.user) {
       this.videoLanguages = []