From: Aaryan Porwal <aaryanporwal2233@gmail.com>
Date: Wed, 26 May 2021 08:58:15 +0000 (+0530)
Subject: mgr/dashboard: fix for right sidebar nav icon not clickable
X-Git-Tag: v15.2.14~50^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F42015%2Fhead;p=ceph.git

mgr/dashboard: fix for right sidebar nav icon not clickable

fixed the responsive sidebar not opening on click event, and close sidebar on clicking tasks and notification list item because it'll be over shadowed by the sidebar
Signed-off-by: Aaryan Porwal <aaryanporwal2233@gmail.com>
(cherry picked from commit 4e53a139d96215477d00eb709c1662d8277cba1d)

 Conflicts:
	src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html
      - Adopt the master branch changes.
---

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 5a71b110bfb9..8068eab8bb36 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
@@ -18,7 +18,7 @@
 
     <button type="button"
             class="navbar-toggler"
-            (click)="isCollapsed = !isCollapsed">
+            (click)="toggleRightSidebar()">
       <span i18n
             class="sr-only">Toggle navigation</span>
       <span class="">
@@ -27,7 +27,7 @@
     </button>
 
     <div class="collapse navbar-collapse"
-         [collapse]="isCollapsed">
+         [ngClass]="{'show': rightSidebarOpen}">
       <ul class="nav navbar-nav cd-navbar-utility my-2 my-md-0">
         <ng-container *ngTemplateOutlet="cd_utilities"> </ng-container>
       </ul>
@@ -58,7 +58,8 @@
     <cd-language-selector class="cd-navbar"></cd-language-selector>
   </li>
   <li class="nav-item ">
-    <cd-notifications class="cd-navbar"></cd-notifications>
+    <cd-notifications class="cd-navbar"
+                      (click)="toggleRightSidebar()"></cd-notifications>
   </li>
   <li class="nav-item ">
     <cd-dashboard-help class="cd-navbar"></cd-dashboard-help>
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 5d45104cb826..285cdc370659 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
@@ -29,7 +29,7 @@ export class NavigationComponent implements OnInit, OnDestroy {
   summaryData: any;
   icons = Icons;
 
-  isCollapsed = true;
+  rightSidebarOpen = false; // rightSidebar only opens when width is less than 768px
   showMenuSidebar = true;
   displayedSubMenu = '';
 
@@ -96,6 +96,10 @@ export class NavigationComponent implements OnInit, OnDestroy {
     }
   }
 
+  toggleRightSidebar() {
+    this.rightSidebarOpen = !this.rightSidebarOpen;
+  }
+
   showTopNotification(name: string, isDisplayed: boolean) {
     if (isDisplayed) {
       if (!this.notifications.includes(name)) {