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 <[email protected]>

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

Co-authored-by: afreen23 <[email protected]>
Signed-off-by: alexjr2001 <[email protected]>

mgr/dashboard: apply lint fixes

Author: alexjr2001

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];
   }