Merge pull request ceph#62683 from alexjr2001/issue-66309-scroll-up-navigation

scroll up by default when clicking on side navigation

Reviewed-by: Afreen Misbah <[email protected]>

Author: afreen23

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html

@@ -80,7 +80,9 @@
   <ng-template #cd_menu>
     <ng-container *ngIf="enabledFeature$ | async as enabledFeature">
       <cds-sidenav [expanded]="showMenuSidebar"
-                   class="mt-5">
+                   class="mt-5"
+                   (click)="onMenuClick($event)"
+                   #sidenavContainer>
         <!-- Dashboard -->
         <cds-sidenav-item route="/dashboard"
                           [useRouter]="true"

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Router } from '@angular/router';
 
 import * as _ from 'lodash';
@@ -38,6 +38,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
     autoHide: false
   };
   displayedSubMenu = {};
+  @ViewChild('sidenavContainer') sidenavContainer: ElementRef;
   private subs = new Subscription();
 
   clustersMap: Map<string, any> = new Map<string, any>();
@@ -138,6 +139,22 @@ export class NavigationComponent implements OnInit, OnDestroy {
     return undefined;
   }
 
+  onMenuClick(event: MouseEvent) {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) return;
+    const menuElement: Element = target.closest('cds-sidenav-menu');
+
+    if (menuElement) {
+      const clientViewBounding = menuElement.getBoundingClientRect();
+      const isOutOfView =
+        clientViewBounding.top < 0 || clientViewBounding.bottom > window.innerHeight;
+
+      if (isOutOfView) {
+        menuElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+      }
+    }
+  }
+
   toggleSubMenu(menu: string) {
     this.displayedSubMenu[menu] = !this.displayedSubMenu[menu];
   }