From 64db0454afb0103930a04d6baa6f08168cca2bf9 Mon Sep 17 00:00:00 2001
From: Alexander Gomez <alexsgdc@gmail.com>
Date: Fri, 4 Apr 2025 12:03:59 -0500
Subject: [PATCH] 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
---
 .../navigation/navigation.component.html      |  4 +++-
 .../navigation/navigation.component.ts        | 19 ++++++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

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 8bd4895eb646f..c8256c9054c94 100644
--- 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 1b9c0b73c1bfa..cb637e51f784c 100644
--- 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];
   }
-- 
2.39.5