proper toggle of the side menu

projects/aca-shared/src/lib/components/page-layout/page-layout.component.html

@@ -1,6 +1,6 @@
 <div class="aca-content-container">
     <div class="aca-content-header">
-        <div class="aca-menu-icon" [ngClass]="{'aca-menu-hidden' : !hideSidenav}" (click)="toggleClick()" (keypress)="toggleClick()">
+        <div *ngIf="(appNavNarMode$ | async) === 'collapsed'" class="aca-menu-icon" (click)="toggleClick()" (keypress)="toggleClick()">
             <mat-icon title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">menu</mat-icon>
         </div>
         <ng-content select="aca-page-layout-header"></ng-content>

projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss

@@ -29,10 +29,6 @@
     margin-top: 2px;
   }
 
-  .aca-menu-hidden {
-    display: none;
-  }
-
   .aca-page-layout-header {
     display: flex;
     align-items: center;

projects/aca-shared/src/lib/components/page-layout/page-layout.component.ts

@@ -23,7 +23,9 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
+import { Component, ViewEncapsulation, Input, OnDestroy } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { AppService } from '../../services/app.service';
 
 @Component({
@@ -31,26 +33,25 @@ import { AppService } from '../../services/app.service';
   templateUrl: './page-layout.component.html',
   styleUrls: ['./page-layout.component.scss'],
   encapsulation: ViewEncapsulation.None,
-  host: { class: 'aca-page-layout' },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  host: { class: 'aca-page-layout' }
 })
-export class PageLayoutComponent {
+export class PageLayoutComponent implements OnDestroy {
   @Input()
   hasError = false;
-  hideSidenav: boolean;
 
-  constructor(private appService: AppService, private ref: ChangeDetectorRef) {
-    setInterval(() => {
-      this.ref.detectChanges();
-    });
-  }
+  private onDestroy$ = new Subject<boolean>();
+  appNavNarMode$: Observable<'collapsed' | 'expanded'>;
 
-  ngOnInit() {
-    this.appService.cast.subscribe((data) => (this.hideSidenav = data));
+  constructor(private appService: AppService) {
+    this.appNavNarMode$ = appService.appNavNarMode$.pipe(takeUntil(this.onDestroy$));
   }
 
   toggleClick() {
-    this.hideSidenav = !this.hideSidenav;
-    this.appService.getSidenavValue(this.hideSidenav);
+    this.appService.toggleAppNavBar$.next();
+  }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
   }
 }

projects/aca-shared/src/lib/services/app.service.ts

@@ -66,11 +66,11 @@ export class AppService implements OnDestroy {
   private ready: BehaviorSubject<boolean>;
   ready$: Observable<boolean>;
 
-  public hideSidenav = new BehaviorSubject<boolean>(false);
-  cast = this.hideSidenav.asObservable();
-
   pageHeading$: Observable<string>;
 
+  appNavNarMode$: Subject<'collapsed' | 'expanded'> = new BehaviorSubject('expanded');
+  toggleAppNavBar$ = new Subject();
+
   hideSidenavConditions = ['/preview/'];
   minimizeSidenavConditions = ['search'];
 
@@ -121,10 +121,6 @@ export class AppService implements OnDestroy {
     );
   }
 
-  getSidenavValue(str: boolean) {
-    this.hideSidenav.next(str);
-  }
-
   ngOnDestroy(): void {
     this.onDestroy$.next(true);
     this.onDestroy$.complete();