Added expand and collapse functionality

projects/aca-about/src/lib/about.component.html

@@ -1,5 +1,4 @@
-<aca-page-layout>
+  <aca-page-layout-content [scrollable]="true" [ngClass]="{'app-about-container' : hideSidenav === true}">
-  <aca-page-layout-content [scrollable]="true">
     <adf-about>
       <adf-about-panel *ngIf="dev" [label]="'ABOUT.SERVER_SETTINGS.TITLE' | translate">
         <ng-template>
@@ -26,4 +25,3 @@
       </adf-about-panel>
     </adf-about>
   </aca-page-layout-content>
-</aca-page-layout>

projects/aca-about/src/lib/about.component.scss

@@ -2,3 +2,13 @@ adf-about {
   padding: 10px;
   width: 100%;
 }
+
+.app-about-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  right: 0;
+  height: 100%;
+}

projects/aca-about/src/lib/about.component.ts

@@ -30,6 +30,7 @@ import { AppExtensionService, ExtensionRef } from '@alfresco/adf-extensions';
 import { AuthenticationService, RepositoryInfo } from '@alfresco/adf-core';
 import { DiscoveryApiService } from '@alfresco/adf-content-services';
 import { PACKAGE_JSON } from './package-json.token';
+import { ContentServiceExtensionService } from '../../../aca-content/src/lib/services/content-service-extension.service';
 
 @Component({
   selector: 'app-about-page',
@@ -41,6 +42,7 @@ export class AboutComponent implements OnInit {
   dev = false;
   extensions$: Observable<ExtensionRef[]>;
   repository: RepositoryInfo = null;
+  hideSidenav: boolean;
 
   constructor(
     @Inject(DEV_MODE_TOKEN) devMode,
@@ -49,7 +51,8 @@ export class AboutComponent implements OnInit {
     public packageJson,
     private authService: AuthenticationService,
     private appExtensions: AppExtensionService,
-    private discovery: DiscoveryApiService
+    private discovery: DiscoveryApiService,
+    private contentServices: ContentServiceExtensionService
   ) {
     this.dev = !devMode;
     this.extensions$ = this.appExtensions.references$;
@@ -59,6 +62,7 @@ export class AboutComponent implements OnInit {
     if (this.authService.isEcmLoggedIn()) {
       this.setECMInfo();
     }
+    this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
   }
 
   setECMInfo() {

projects/aca-content/assets/i18n/en.json

@@ -427,7 +427,8 @@
         "TOOLTIPS": {
             "COLLAPSE_NAVIGATION": "Collapse navigation menu",
             "OPTIONS_SETTINGS": "Options and settings",
-            "MY_PROFILE": "My profile"
+            "MY_PROFILE": "My profile",
+            "EXPAND_NAVIGATION": "Expand navigation"
           }
     },
     "NODE_SELECTOR": {

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

@@ -1,8 +1,8 @@
-<div class="sidenav">
+<div class="sidenav" *ngIf="!hideSidenav">
   <ng-container [ngSwitch]="mode">
     <div class="sidenav-header">
       <div class="sidenav-header-title">
-        <div class="sidenav-header-title-logo">
+        <div class="sidenav-header-title-logo" (click)="toggleClick()">
           <mat-icon svgIcon="workspace"
             title="{{'APP.TOOLTIPS.COLLAPSE_NAVIGATION' | translate}}"></mat-icon>
         </div>

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 } from '@alfresco/aca-shared';
+import { ContentServiceExtensionService } from '../../services/content-service-extension.service';
 
 @Component({
   selector: 'app-sidenav',
@@ -41,11 +42,12 @@ import { AppExtensionService } from '@alfresco/aca-shared';
 export class SidenavComponent implements OnInit, OnDestroy {
   @Input()
   mode: 'collapsed' | 'expanded' = 'expanded';
+  hideSidenav: boolean;
 
   groups: Array<NavBarGroupRef> = [];
   private onDestroy$ = new Subject<boolean>();
 
-  constructor(private store: Store<AppStore>, private extensions: AppExtensionService) {}
+  constructor(private store: Store<AppStore>, private extensions: AppExtensionService, private contentServices: ContentServiceExtensionService) {}
 
   ngOnInit() {
     this.store
@@ -54,6 +56,7 @@ export class SidenavComponent implements OnInit, OnDestroy {
       .subscribe(() => {
         this.groups = this.extensions.getApplicationNavigation(this.extensions.navbar);
       });
+      this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
   }
 
   trackByGroupId(_: number, obj: NavBarGroupRef): string {
@@ -64,6 +67,11 @@ export class SidenavComponent implements OnInit, OnDestroy {
     return obj.id;
   }
 
+  toggleClick() {
+    this.hideSidenav = !this.hideSidenav;
+    this.contentServices.push(this.hideSidenav);
+  }
+
   ngOnDestroy() {
     this.onDestroy$.next(true);
     this.onDestroy$.complete();

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

@@ -1,4 +1,4 @@
-<div class="app-profile-container">
+<div class="app-profile-container" [ngClass]="{'app-view-profile-container' : hideSidenav === true}">
   <div class="app-profile-row">
     <div class="app-profile-title">
       <mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>

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

@@ -191,4 +191,14 @@ app-view-profile {
     padding-top: 2rem;
     padding-left: .5rem;
   }
+
+  .app-view-profile-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+  }
 }

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

@@ -11,6 +11,7 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { throwError } from 'rxjs';
+import { ContentServiceExtensionService } from '../../services/content-service-extension.service';
 
 @Component({
   selector: 'app-view-profile',
@@ -33,8 +34,9 @@ export class ViewProfileComponent implements OnInit {
 
   contactSectionDropdown = false;
   contactSectionButtonsToggle = true;
+  hideSidenav: boolean;
 
-  constructor(private router: Router, apiService: AlfrescoApiService) {
+  constructor(private router: Router, apiService: AlfrescoApiService, private contentServices: ContentServiceExtensionService) {
     this.peopleApi = new PeopleApi(apiService.getInstance());
   }
 
@@ -49,6 +51,7 @@ export class ViewProfileComponent implements OnInit {
       .catch((error) => {
         throwError(error);
       });
+      this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
   }
 
   populateForm(userInfo: Person) {

projects/aca-content/src/lib/services/content-service-extension.service.ts

@@ -9,15 +9,23 @@
 import { Injectable } from '@angular/core';
 import { AppConfigService } from '@alfresco/adf-core';
 import { take } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class ContentServiceExtensionService {
+  public hideSidenav = new BehaviorSubject<boolean>(false);
+  cast = this.hideSidenav.asObservable();
+
   constructor(private appConfigService: AppConfigService) {
     this.updateContentServiceAvailability();
   }
 
+  push(str: boolean) {
+    this.hideSidenav.next(str);
+  }
+
   updateContentServiceAvailability() {
     this.appConfigService.onLoad.pipe(take(1)).subscribe((config) => {
       if (config.plugins && config.plugins.contentService === false) {

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

@@ -1,3 +1,11 @@
-<ng-content select="aca-page-layout-header"></ng-content>
+<div class="aca-content-container" [ngClass]="{'aca-page-layout-container' : hideSidenav}">
-<ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
+    <div class="aca-content-header">
-<ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
+        <div class="aca-menu-icon" [ngClass]="{'aca-display-menu' : !hideSidenav}" (click)="toggleClick()">
+            <mat-icon title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">menu</mat-icon>
+        </div>
+        <ng-content select="aca-page-layout-header">
+        </ng-content>
+    </div>
+    <ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
+    <ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
+</div>

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

@@ -3,20 +3,48 @@
 .aca-page-layout {
   @include flex-column;
 
+  .aca-content-header {
+    border-left: none;
+    border-right: none;
+    background: var(--theme-page-layout-header-background-color);
+    height: 96px;
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+  }
+
+  .aca-menu-icon {
+    cursor: pointer;
+    transform: scale(1.1);
+    padding: 32px 12px 32px 0;
+    margin-top: 2px;
+  }
+
+  .aca-display-menu {
+    display: none;
+  }
+
+  .aca-page-layout-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+  }
+
   .aca-page-layout-header {
     display: flex;
     align-items: center;
-    flex: 0 0 65px;
+    flex: auto;
-    flex-basis: 96px;
+    width: 100%;
-    background: var(--theme-page-layout-header-background-color);
-    border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
-    padding: 0 24px;
     
-      .adf-breadcrumb-item {
+    .adf-breadcrumb-item {
-        font-size: 20px !important;
+      font-size: 20px !important;
-        font-weight: 400 !important;
+      font-weight: 400 !important;
-        letter-spacing: 0.15px !important;
+      letter-spacing: 0.15px !important;
-      }
+    }
   }
 
   .aca-page-layout-content {

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

@@ -23,7 +23,8 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, ChangeDetectorRef } from '@angular/core';
+import { ContentServiceExtensionService } from '../../../../../aca-content/src/lib/services/content-service-extension.service';
 
 @Component({
   selector: 'aca-page-layout',
@@ -36,4 +37,20 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@a
 export class PageLayoutComponent {
   @Input()
   hasError = false;
+  hideSidenav: boolean;
+
+  constructor(private contentServices: ContentServiceExtensionService, private ref: ChangeDetectorRef) {
+    setInterval(() => {
+      this.ref.detectChanges();
+    });
+  }
+
+  ngOnInit() {
+    this.contentServices.cast.subscribe((data) => (this.hideSidenav = data));
+  }
+
+  toggleClick() {
+    this.hideSidenav = !this.hideSidenav;
+    this.contentServices.push(this.hideSidenav);
+  }
 }

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

@@ -29,9 +29,10 @@ import { PageLayoutErrorComponent } from './page-layout-error.component';
 import { PageLayoutHeaderComponent } from './page-layout-header.component';
 import { PageLayoutComponent } from './page-layout.component';
 import { CommonModule } from '@angular/common';
+import { CoreModule } from '@alfresco/adf-core';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, CoreModule.forChild()],
   declarations: [PageLayoutContentComponent, PageLayoutErrorComponent, PageLayoutHeaderComponent, PageLayoutComponent],
   exports: [PageLayoutContentComponent, PageLayoutErrorComponent, PageLayoutHeaderComponent, PageLayoutComponent]
 })