proper toggle of the side menu

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

@@ -43,7 +43,7 @@ import {
   LibraryStatusColumnComponent,
   TrashcanNameColumnComponent
 } from '@alfresco/adf-content-services';
-import { DocumentBasePageService, ExtensionsDataLoaderGuard, RouterExtensionService, SharedModule } from '@alfresco/aca-shared';
+import { DocumentBasePageService, ExtensionsDataLoaderGuard, PageLayoutModule, RouterExtensionService, SharedModule } from '@alfresco/aca-shared';
 import * as rules from '@alfresco/aca-shared/rules';
 
 import { FilesComponent } from './components/files/files.component';
@@ -62,11 +62,9 @@ import { AppToolbarModule } from './components/toolbar/toolbar.module';
 import { AppCreateMenuModule } from './components/create-menu/create-menu.module';
 import { AppSidenavModule } from './components/sidenav/sidenav.module';
 import { AppCommonModule } from './components/common/common.module';
-import { AppLayoutModule } from './components/layout/layout.module';
 import { AppSearchInputModule } from './components/search/search-input.module';
 import { DocumentListCustomComponentsModule } from './components/dl-custom-components/document-list-custom-components.module';
 import { AppSearchResultsModule } from './components/search/search-results.module';
-import { AppHeaderModule } from './components/header/header.module';
 import { AppNodeVersionModule } from './components/node-version/node-version.module';
 import { FavoritesComponent } from './components/favorites/favorites.component';
 import { RecentFilesComponent } from './components/recent-files/recent-files.component';
@@ -97,7 +95,6 @@ import { LocationLinkComponent } from './components/common/location-link/locatio
 import { LogoutComponent } from './components/common/logout/logout.component';
 import { ToggleSharedComponent } from './components/common/toggle-shared/toggle-shared.component';
 import { CustomNameColumnComponent } from './components/dl-custom-components/name-column/name-column.component';
-import { AppHeaderComponent } from './components/header/header.component';
 import { CommentsTabComponent } from './components/info-drawer/comments-tab/comments-tab.component';
 import { LibraryMetadataTabComponent } from './components/info-drawer/library-metadata-tab/library-metadata-tab.component';
 import { MetadataTabComponent } from './components/info-drawer/metadata-tab/metadata-tab.component';
@@ -114,14 +111,14 @@ import { ViewNodeComponent } from './components/toolbar/view-node/view-node.comp
 import { CONTENT_ROUTES } from './aca-content.routes';
 import { RouterModule } from '@angular/router';
 import { UploadFilesDialogComponent } from './components/upload-files-dialog/upload-files-dialog.component';
-import { SidenavWrapperComponent } from './components/sidenav/sidenav-wrapper/sidenav-wrapper.component';
-import { AppLayoutComponent } from './components/layout/app-layout/app-layout.component';
 import { AppTrashcanModule } from './components/trashcan/trashcan.module';
 import { AppSharedLinkViewModule } from './components/shared-link-view/shared-link-view.module';
 import { AcaFolderRulesModule } from '@alfresco/aca-folder-rules';
 import { TagsColumnComponent } from './components/dl-custom-components/tags-column/tags-column.component';
-import { ContentManagementService } from './services/content-management.service';
 import { UserInfoComponent } from './components/common/user-info/user-info.component';
+import { SidenavComponent } from './components/sidenav/sidenav.component';
+import { ContentManagementService } from './services/content-management.service';
+import { ShellLayoutComponent, SHELL_NAVBAR_MIN_WIDTH } from '@alfresco/adf-core/shell';
 
 registerLocaleData(localeFr);
 registerLocaleData(localeDe);
@@ -154,7 +151,7 @@ registerLocaleData(localeSv);
     MaterialModule,
     AppStoreModule,
     AppCommonModule,
-    AppLayoutModule,
+    PageLayoutModule,
     DirectivesModule,
     ContextMenuModule,
     AppInfoDrawerModule,
@@ -164,7 +161,6 @@ registerLocaleData(localeSv);
     DocumentListCustomComponentsModule,
     AppSearchInputModule,
     AppSearchResultsModule,
-    AppHeaderModule,
     AppNodeVersionModule,
     HammerModule,
     ViewProfileModule,
@@ -195,7 +191,8 @@ registerLocaleData(localeSv);
         name: 'app',
         source: 'assets'
       }
-    }
+    },
+    { provide: SHELL_NAVBAR_MIN_WIDTH, useValue: 0 }
   ]
 })
 export class ContentServiceExtensionModule {
@@ -206,9 +203,8 @@ export class ContentServiceExtensionModule {
     });
 
     extensions.setComponents({
-      'app.layout.main': AppLayoutComponent,
-      'app.layout.header': AppHeaderComponent,
-      'app.layout.sidenav': SidenavWrapperComponent,
+      'app.layout.main': ShellLayoutComponent,
+      'app.layout.sidenav': SidenavComponent,
       'app.shell.sibling': UploadFilesDialogComponent,
       'app.components.tabs.metadata': MetadataTabComponent,
       'app.components.tabs.library.metadata': LibraryMetadataTabComponent,
@@ -301,7 +297,10 @@ export class ContentServiceExtensionModule {
       'repository.isQuickShareEnabled': rules.hasQuickShareEnabled,
       'user.isAdmin': rules.isAdmin,
       'app.canShowLogout': rules.canShowLogout,
-      'app.isContentServiceEnabled': rules.isContentServiceEnabled
+      'app.isContentServiceEnabled': rules.isContentServiceEnabled,
+      'app.isUploadSupported': rules.isUploadSupported,
+      'app.canCreateLibrary': rules.canCreateLibrary,
+      'app.isSearchSupported': rules.isSearchSupported
     });
   }
 }

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) {

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

@@ -58,11 +58,11 @@ export class AppService {
   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'];
   onDestroy$ = new Subject<boolean>();