mgr/dashboard: scroll up by default when clicking on side navigation

Ensures the side menu scrolls into view when an item (e.g., "Administration") is clicked and goes out of the screen view. This is done with an onClick event in cds-sidenav tag due to limitations in the Carbon Design System that prevent direct access to `onclick` events.

Fixes: https://tracker.ceph.com/issues/66309
Signed-off-by: Alexander Gomez <alexsgdc@gmail.com>
Update src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts

Co-authored-by: afreen23 <afreen23.git@gmail.com>
Signed-off-by: alexjr2001 <63054183+alexjr2001@users.noreply.github.com>
mgr/dashboard: apply lint fixes

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
index 8bd4895eb646ff4d67616c9ce5d64ddf34b8bf80..c8256c9054c944b55884614edbfc7e68fbba3903 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/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"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
index 1b9c0b73c1bfab17770ef637a1d3ffbb6d80daf6..cb637e51f784c4c1be5be79c661611020fc85517 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.ts
+++ b/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];
   }