mgr/dashboard: Navbar dropdown button does not respond for mobile-like browsers

Signed-off-by: Volker Theile <vtheile@suse.com>

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation.module.ts

@@ -2,8 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { PopoverModule } from 'ngx-bootstrap/popover';
+import { BsDropdownModule, CollapseModule, PopoverModule } from 'ngx-bootstrap';
 
 import { AppRoutingModule } from '../../app-routing.module';
 import { SharedModule } from '../../shared/shared.module';
@@ -16,6 +15,7 @@ import { TaskManagerComponent } from './task-manager/task-manager.component';
   imports: [
     CommonModule,
     AuthModule,
+    CollapseModule.forRoot(),
     BsDropdownModule.forRoot(),
     PopoverModule.forRoot(),
     AppRoutingModule,

src/pybind/mgr/dashboard/frontend/src/app/core/navigation/navigation/navigation.component.html

@@ -10,8 +10,7 @@
 
     <button type="button"
             class="navbar-toggle collapsed"
-            data-toggle="collapse"
-            data-target="#bs-example-navbar-collapse-1">
+            (click)="isCollapsed = !isCollapsed">
       <span i18n
             class="sr-only">Toggle navigation
       </span>
@@ -23,7 +22,8 @@
 
   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse"
-       id="bs-example-navbar-collapse-1">
+       id="bs-example-navbar-collapse-1"
+       [collapse]="isCollapsed">
     <ul class="nav navbar-nav navbar-primary">
 
       <!-- Dashboard -->

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

@@ -2,7 +2,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
-import { PopoverModule } from 'ngx-bootstrap/popover';
+import { CollapseModule, PopoverModule } from 'ngx-bootstrap';
 
 import { NotificationService } from '../../../shared/services/notification.service';
 import { SharedModule } from '../../../shared/shared.module';
@@ -17,25 +17,24 @@ describe('NavigationComponent', () => {
 
   const fakeService = new NotificationService(null, null);
 
-  beforeEach(
-    async(() => {
-      TestBed.configureTestingModule({
-        imports: [
-          SharedModule,
-          RouterTestingModule,
-          HttpClientTestingModule,
-          PopoverModule.forRoot()
-        ],
-        declarations: [
-          NavigationComponent,
-          NotificationsComponent,
-          LogoutComponent,
-          TaskManagerComponent
-        ],
-        providers: [{ provide: NotificationService, useValue: fakeService }]
-      }).compileComponents();
-    })
-  );
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SharedModule,
+        RouterTestingModule,
+        HttpClientTestingModule,
+        CollapseModule.forRoot(),
+        PopoverModule.forRoot()
+      ],
+      declarations: [
+        NavigationComponent,
+        NotificationsComponent,
+        LogoutComponent,
+        TaskManagerComponent
+      ],
+      providers: [{ provide: NotificationService, useValue: fakeService }]
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(NavigationComponent);

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

@@ -9,6 +9,7 @@ import { SummaryService } from '../../../shared/services/summary.service';
 export class NavigationComponent implements OnInit {
   summaryData: any;
   rbdPools: Array<any> = [];
+  isCollapsed = true;
 
   constructor(private summaryService: SummaryService) {}