proper toggle of the side menu

projects/aca-content/src/lib/components/header/header.component.html

@@ -0,0 +1,18 @@
+<adf-layout-header
+  [logo]="logo$ | async"
+  [redirectUrl]="landingPage"
+  [tooltip]="appName$ | async"
+  [title]="appName$ | async"
+  (clicked)="onToggleSidenav($event)"
+  [expandedSidenav]="isSidenavExpanded"
+>
+  <div class="adf-toolbar--spacer adf-toolbar-divider"></div>
+
+  <aca-search-input *ngIf="isContentServiceEnabled()"></aca-search-input>
+
+  <adf-toolbar-divider></adf-toolbar-divider>
+
+  <ng-container *ngFor="let actionRef of actions; trackBy: trackByActionId">
+    <aca-toolbar-action [actionRef]="actionRef"> </aca-toolbar-action>
+  </ng-container>
+</adf-layout-header>

projects/aca-content/src/lib/components/header/header.component.ts

@@ -33,6 +33,7 @@ import { takeUntil } from 'rxjs/operators';
 import { AppConfigService, SidenavLayoutComponent } from '@alfresco/adf-core';
 import { isContentServiceEnabled } from '@alfresco/aca-shared/rules';
 
+/** @deprecated */
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',

projects/aca-content/src/lib/components/layout/app-layout/app-layout.component.html

@@ -24,7 +24,7 @@
     <adf-sidenav-layout-navigation>
       <ng-template let-isMenuMinimized="isMenuMinimized">
         <app-sidenav
-          [mode]="isMenuMinimized() ? 'collapsed' : 'expanded'"
+          [data]="{ layout, mode: layout.isMenuMinimized ? 'collapsed' : 'expanded'}"
           [attr.data-automation-id]="isMenuMinimized() ? 'collapsed' : 'expanded'"
           (swipeleft)="hideMenu($event)"
         >

projects/aca-content/src/lib/components/layout/layout.module.ts

@@ -26,6 +26,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CoreModule } from '@alfresco/adf-core';
+import { SHELL_NAVBAR_MIN_WIDTH } from '@alfresco/adf-core/shell';
 import { AppLayoutComponent } from './app-layout/app-layout.component';
 import { ContentModule } from '@alfresco/adf-content-services';
 import { RouterModule } from '@angular/router';
@@ -48,6 +49,7 @@ import { PageLayoutModule } from '@alfresco/aca-shared';
     PageLayoutModule
   ],
   declarations: [AppLayoutComponent],
-  exports: [AppLayoutComponent, PageLayoutModule]
+  exports: [AppLayoutComponent, PageLayoutModule],
+  providers: [{ provide: SHELL_NAVBAR_MIN_WIDTH, useValue: 0 }]
 })
 export class AppLayoutModule {}

projects/aca-content/src/lib/components/sidenav/sidenav-wrapper/sidenav-wrapper.component.html

@@ -1,3 +0,0 @@
-<app-sidenav
-    [mode]="data.mode"
-></app-sidenav>

projects/aca-content/src/lib/components/sidenav/sidenav-wrapper/sidenav-wrapper.component.ts

@@ -1,39 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2020 Alfresco Software Limited
- *
- * This file is part of the Alfresco Example Content Application.
- * If the software was purchased under a paid Alfresco license, the terms of
- * the paid license agreement will prevail.  Otherwise, the software is
- * provided under the following open source license terms:
- *
- * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Lesser General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * The Alfresco Example Content Application is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Lesser General Public License for more details.
- *
- * You should have received a copy of the GNU Lesser General Public License
- * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Component, Input } from '@angular/core';
-
-/**
- * This wrapper is designated to be used with 'adf-dynamic-component'.
- * It forwards the dynamic component inputs to original sidenav.
- */
-@Component({
-  selector: 'aca-sidenav-wrapper',
-  templateUrl: './sidenav-wrapper.component.html'
-})
-export class SidenavWrapperComponent {
-  @Input()
-  data: { mode?: 'collapsed' | 'expanded' } = {};
-}

projects/aca-content/src/lib/components/sidenav/sidenav.component.html

@@ -1,5 +1,5 @@
-<div class="sidenav" *ngIf="!hideSidenav">
-  <ng-container [ngSwitch]="mode">
+<div class="sidenav">
+  <ng-container [ngSwitch]="data.mode">
     <div class="sidenav-header">
       <div class="sidenav-header-title">
         <div class="sidenav-header-title-logo" (click)="toggleClick()" (keypress)="toggleClick()">
@@ -16,8 +16,9 @@
         </div>
       </div>
     </div>
+
     <div class="section-sub-actions">
-      <div *ngFor="let group of groups; trackBy: trackByGroupId" class="section" [ngClass]="'section--' + mode">
+      <div *ngFor="let group of groups; trackBy: trackByGroupId" class="section" [ngClass]="'section--' + data.mode">
         <ng-container *ngSwitchCase="'expanded'">
           <mat-list-item *ngFor="let item of group.items; trackBy: trackByLinkId">
             <ng-container *ngIf="!item.component">

projects/aca-content/src/lib/components/sidenav/sidenav.component.ts

@@ -30,6 +30,7 @@ import { AppStore, getSideNavState } from '@alfresco/aca-shared/store';
 import { Subject } from 'rxjs';
 import { takeUntil, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { AppExtensionService, AppService } from '@alfresco/aca-shared';
+import { SidenavLayoutComponent } from '@alfresco/adf-core';
 
 @Component({
   selector: 'app-sidenav',
@@ -40,13 +41,15 @@ import { AppExtensionService, AppService } from '@alfresco/aca-shared';
 })
 export class SidenavComponent implements OnInit, OnDestroy {
   @Input()
-  mode: 'collapsed' | 'expanded' = 'expanded';
-  hideSidenav: boolean;
+  data: {
+    layout?: SidenavLayoutComponent;
+    mode?: 'collapsed' | 'expanded';
+  } = {};
 
   groups: Array<NavBarGroupRef> = [];
   private onDestroy$ = new Subject<boolean>();
 
-  constructor(private store: Store<AppStore>, private extensions: AppExtensionService, private appServices: AppService) {}
+  constructor(private store: Store<AppStore>, private extensions: AppExtensionService, private appService: AppService) {}
 
   ngOnInit() {
     this.store
@@ -55,7 +58,9 @@ export class SidenavComponent implements OnInit, OnDestroy {
       .subscribe(() => {
         this.groups = this.extensions.getApplicationNavigation(this.extensions.navbar);
       });
-    this.appServices.cast.subscribe((data) => (this.hideSidenav = data));
+
+    this.appService.appNavNarMode$.next(this.data.mode);
+    this.appService.toggleAppNavBar$.pipe(takeUntil(this.onDestroy$)).subscribe(() => this.toggleNavBar());
   }
 
   trackByGroupId(_: number, obj: NavBarGroupRef): string {
@@ -67,8 +72,12 @@ export class SidenavComponent implements OnInit, OnDestroy {
   }
 
   toggleClick() {
-    this.hideSidenav = !this.hideSidenav;
-    this.appServices.getSidenavValue(this.hideSidenav);
+    this.toggleNavBar();
+  }
+
+  private toggleNavBar() {
+    this.data.layout.toggleMenu();
+    this.appService.appNavNarMode$.next(this.data.layout.isMenuMinimized ? 'collapsed' : 'expanded');
   }
 
   ngOnDestroy() {

projects/aca-content/src/lib/components/sidenav/sidenav.module.ts

@@ -38,7 +38,6 @@ import { ExpandMenuComponent } from './components/expand-menu.component';
 import { ButtonMenuComponent } from './components/button-menu.component';
 import { ActionDirective } from './directives/action.directive';
 import { MainActionModule } from '../main-action/main-action.module';
-import { SidenavWrapperComponent } from './sidenav-wrapper/sidenav-wrapper.component';
 import { NavigationMenuComponent } from './navigation-menu/navigation-menu.component';
 
 @NgModule({
@@ -59,7 +58,6 @@ import { NavigationMenuComponent } from './navigation-menu/navigation-menu.compo
     ExpandMenuComponent,
     ButtonMenuComponent,
     SidenavComponent,
-    SidenavWrapperComponent,
     NavigationMenuComponent
   ],
   exports: [

projects/aca-content/src/lib/components/view-profile/view-profile.component.ts

@@ -11,7 +11,6 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { throwError } from 'rxjs';
-import { AppService } from '@alfresco/aca-shared';
 
 @Component({
   selector: 'app-view-profile',
@@ -36,7 +35,7 @@ export class ViewProfileComponent implements OnInit {
   contactSectionButtonsToggle = true;
   hideSidenav: boolean;
 
-  constructor(private router: Router, apiService: AlfrescoApiService, private appService: AppService) {
+  constructor(private router: Router, apiService: AlfrescoApiService) {
     this.peopleApi = new PeopleApi(apiService.getInstance());
   }
 
@@ -51,7 +50,6 @@ export class ViewProfileComponent implements OnInit {
       .catch((error) => {
         throwError(error);
       });
-    this.appService.cast.subscribe((data) => (this.hideSidenav = data));
   }
 
   populateForm(userInfo: Person) {