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 5a71b110bfb9871ffd96b82858fcb6df32f10325..8068eab8bb363ce44577dd1bde4ae5bc82516145 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
@@ -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 5d45104cb82659df02f8244a94f9af3181e54340..285cdc370659624afd755cd81a498d9b7e96789c 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
@@ -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)) {