layout changes for ADW

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>
-<ng-content select="aca-page-layout-error" *ngIf="hasError"></ng-content>
-<ng-content select="aca-page-layout-content" *ngIf="!hasError"></ng-content>
+<div class="aca-content-container" [ngClass]="{'aca-page-layout-container' : hideSidenav}">
+    <div class="aca-content-header">
+        <div class="aca-menu-icon" [ngClass]="{'aca-display-menu' : !hideSidenav}" (click)="toggleClick()" (keyup)="toggleClick">
+            <mat-icon>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,14 +3,49 @@
 .aca-page-layout {
   @include flex-column;
 
+  .aca-content-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  .aca-content-header {
+    border-left: none;
+    border-right: none;
+    background: var(--theme-pagination-background-color);
+    height: 96px;
+    padding: 0 24px;
+    display: flex;
+    align-items: center;
+  }
+
+  .aca-menu-icon {
+    padding-right: 24px;
+    cursor: pointer;
+    transform: scale(1.2);
+  }
+
   .aca-page-layout-header {
     display: flex;
     align-items: center;
-    flex: 0 0 65px;
-    flex-basis: 48px;
-    background: var(--theme-background-color);
-    border-bottom: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
-    padding: 0 24px;
+    flex: auto
+  }
+
+  .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-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, OnInit } from '@angular/core';
+import { ContentServiceExtensionService } from '../../../../../../app/src/app/content-plugin/services/content-service-extension.service';
 
 @Component({
   selector: 'aca-page-layout',
@@ -33,7 +34,23 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@a
   host: { class: 'aca-page-layout' },
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class PageLayoutComponent {
+export class PageLayoutComponent implements OnInit {
   @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]
 })