[ADF-3177] added general header component (#3537)

* [ADF-3177] added general header component

* [ADF-3177] added documentation and removed user info mobile behaviour

* [ADF-3177] eddited doc file

* [ADF-3177] renamed folder and style changes

* [ADF-3177] style changes

* [ADF-3177] fix tests

* [ADF-3177] fix lint errors and tests

* [APM-3177] css changes

* [ADF-3177] fix pr

* [ADF-3177] updated documentation

* [ADF-3177] expose module with old name

* [ADF-3177] expose module with old name

lib/core/layout/components/header/header.component.html

@@ -0,0 +1,11 @@
+<mat-toolbar color="{{color}}">
+    <button *ngIf="showSidenavToggle" class="mat-icon-button adf-menu-icon" mat-icon-button (click)="toggleMenu()">
+        <mat-icon class="mat-icon material-icon" role="img" aria-hidden="true">menu</mat-icon>
+    </button>
+
+    <img src="{{logo}}" class="adf-app-logo">
+
+    <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true" class="adf-app-title">{{title}}</span>
+    <ng-content></ng-content>
+</mat-toolbar>
+

lib/core/layout/components/header/header.component.scss

@@ -0,0 +1,54 @@
+@mixin  adf-header-layout-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+
+    adf-layout-header .mat-toolbar-single-row {
+
+        color: mat-color($primary, default-contrast) !important;
+        position: relative;
+        padding: 0 24px 0 0;
+
+        .adf-menu-icon {
+            position: relative;
+            margin-left: 14px;
+        }
+
+        .adf-app-logo {
+            position: relative;
+            height: 28px;
+            width: 28px;
+            margin-right: 6px;
+            margin-left: 3px;
+        }
+
+        .adf-header-delimiter {
+            height: 24px;
+            width: 2px;
+            background-color: mat-color($primary, default-contrast);
+            margin-right: 16px;
+        }
+
+        .adf-app-layout-user-profile {
+            margin-right: 16px;
+        }
+
+        .adf-userinfo-container {
+            flex-direction: row;
+            padding: 0;
+        }
+
+        .adf-userinfo-name{
+            padding-right: 8px;
+        }
+
+        @media screen and ($mat-xsmall) {
+            .adf-app-logo,
+            .adf-app-title {
+                display: none;
+            }
+        }
+    }
+}
+
+

lib/core/layout/components/header/header.component.spec.ts

@@ -0,0 +1,124 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { HeaderLayoutComponent } from './header.component';
+import { setupTestBed } from '../../../testing/setupTestBed';
+import { CoreTestingModule } from '../../../testing/core.testing.module';
+import { By } from '@angular/platform-browser';
+import { LayoutModule } from '../..';
+import { Component } from '@angular/core';
+import { MaterialModule } from './../../../material.module';
+
+describe('HeaderLayoutComponent', () => {
+    let fixture: ComponentFixture<HeaderLayoutComponent>;
+    let component: HeaderLayoutComponent;
+
+    describe('Input parameters', () => {
+        setupTestBed({
+            imports: [CoreTestingModule]
+        });
+
+        beforeEach(() => {
+            fixture = TestBed.createComponent(HeaderLayoutComponent);
+            component = fixture.componentInstance;
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+        });
+
+        it('should create instance of HeaderLayoutComponent', () => {
+            expect(fixture.componentInstance instanceof HeaderLayoutComponent).toBe(true, 'should create HeaderLayoutComponent');
+        });
+
+        it('title element should been displayed', () => {
+            const titleElement = fixture.debugElement.query(By.css('.adf-app-title'));
+            expect(titleElement === null).toBeFalsy();
+        });
+
+        it('should show TEST TITLE', () => {
+            component.title = 'TEST TITLE';
+            fixture.detectChanges();
+
+            const titleElement = fixture.nativeElement.querySelector('.adf-app-title');
+            expect(titleElement.innerText).toEqual('TEST TITLE');
+        });
+
+        it('color attribute should be present on mat-toolbar', () => {
+            component.color = 'primary';
+            fixture.detectChanges();
+
+            const toolbar = fixture.nativeElement.querySelector('mat-toolbar');
+            expect(toolbar.getAttribute('ng-reflect-color') === null).toBeFalsy();
+            expect(toolbar.getAttribute('ng-reflect-color')).toEqual('primary');
+        });
+
+        it('should display the img element with the expected src if a logo path is set', () => {
+            component.logo = 'logo.png';
+            fixture.detectChanges();
+
+            const logo = fixture.nativeElement.querySelector('.adf-app-logo');
+            const src = logo.getAttribute('src');
+            expect(logo === null).toBeFalsy();
+            expect(src).toEqual('logo.png');
+        });
+
+        it('test click on sidenav button', () => {
+            component.showSidenavToggle = true;
+            fixture.detectChanges();
+            spyOn(component.clicked, 'emit');
+            const button = fixture.nativeElement.querySelector('.adf-menu-icon');
+
+            button.dispatchEvent(new Event('click'));
+            fixture.detectChanges();
+            expect(component.clicked.emit).toHaveBeenCalledWith(true);
+        });
+
+        it('if showSidenavToggle is false the button menu should not be displayed', () => {
+            component.showSidenavToggle = false;
+            fixture.detectChanges();
+
+            const button = fixture.nativeElement.querySelector('.adf-menu-icon');
+            expect(button === null).toBeTruthy();
+        });
+    });
+
+    describe('Template tranclusion', () => {
+
+        @Component({
+            selector: 'adf-test-layout-header',
+            template: `<adf-layout-header title="test" color="primary"><p>Test text<p></adf-layout-header>`
+        })
+        class HeaderLayoutTesterComponent {}
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+              declarations: [HeaderLayoutTesterComponent],
+              imports: [ LayoutModule, MaterialModule ]
+            })
+            .compileComponents();
+          }));
+
+        it('should transclude the provided nodes into the component', () => {
+            const hostFixture = TestBed.createComponent(HeaderLayoutTesterComponent);
+            hostFixture.detectChanges();
+            const innerText = hostFixture.nativeElement.querySelector('mat-toolbar>p').innerText;
+            expect(innerText).toEqual('Test text');
+        });
+    });
+});

lib/core/layout/components/header/header.component.ts

@@ -0,0 +1,39 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-layout-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-layout-header' }
+})
+
+export class HeaderLayoutComponent {
+
+    @Input() title: string;
+    @Input() logo: string = '../assets/logo.png';
+    @Input() color: string;
+    @Input() showSidenavToggle: boolean = true;
+    @Output() clicked = new EventEmitter<any>();
+
+    toggleMenu() {
+        this.clicked.emit(true);
+    }
+}

lib/core/layout/components/layout-container/layout-container.component.html

@@ -0,0 +1,16 @@
+<mat-sidenav-container>
+    <mat-sidenav
+        [disableClose]="!isMobileScreenSize"
+        [ngClass]="{ 'sidenav--hidden': hideSidenav }"
+        [@sidenavAnimation]="sidenavAnimationState"
+        [opened]="!isMobileScreenSize"
+        [mode]="isMobileScreenSize ? 'over' : 'side'">
+        <ng-content sidenav select="[app-layout-navigation]"></ng-content>
+    </mat-sidenav>
+
+    <div>
+        <div [@contentAnimation]="contentAnimationState" style="margin-left: 0 !important">
+            <ng-content select="[app-layout-content]"></ng-content>
+        </div>
+    </div>
+</mat-sidenav-container>

lib/core/layout/components/layout-container/layout-container.component.scss

@@ -0,0 +1,50 @@
+@mixin adf-layout-container-theme($theme) {
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    adf-layout-container {
+        display: block;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }    
+
+    ng-content {
+        display: block;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .sidenav--hidden {
+        visibility: hidden !important;
+        width: 0 !important;
+        transform: unset !important;
+        opacity: 0 !important;
+    }
+
+    .mat-sidenav-container {
+        display: block;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .mat-sidenav {
+        overflow: hidden;
+        border-right: 1px solid mat-color($foreground, text, 0.07);
+        background-color: mat-color($background,background);
+    }
+
+    mat-sidenav-content {
+        margin-left: 0px !important;
+    }
+
+    .mat-sidenav-content,
+    .mat-drawer-transition .mat-drawer-content {
+        transform: unset !important;
+        transition-property: unset !important;
+        transition-duration: unset !important;
+        transition-timing-function: unset !important;
+    }
+}

lib/core/layout/components/layout-container/layout-container.component.ts

@@ -0,0 +1,113 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, Input, ViewChild, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { MatSidenav } from '@angular/material';
+import { sidenavAnimation, contentAnimation } from '../../helpers/animations';
+
+@Component({
+    selector: 'adf-layout-container',
+    templateUrl: './layout-container.component.html',
+    styleUrls: ['./layout-container.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations: [ sidenavAnimation, contentAnimation ]
+})
+export class LayoutContainerComponent implements OnInit, OnDestroy {
+    @Input() sidenavMin: number;
+    @Input() sidenavMax: number;
+
+    // " | any", because Safari throws an error otherwise...
+    @Input() mediaQueryList: MediaQueryList | any;
+
+    @Input() hideSidenav = false;
+    @Input() expandedSidenav = true;
+
+    @ViewChild(MatSidenav) sidenav: MatSidenav;
+
+    sidenavAnimationState: any;
+    contentAnimationState: any;
+
+    SIDENAV_STATES = { MOBILE: {}, EXPANDED: {}, COMPACT: {} };
+    CONTENT_STATES = { MOBILE: {}, EXPANDED: {}, COMPACT: {} };
+
+    constructor() {
+        this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
+    }
+
+    ngOnInit() {
+        this.SIDENAV_STATES.MOBILE = { value: 'expanded', params: { width: this.sidenavMax } };
+        this.SIDENAV_STATES.EXPANDED = { value: 'expanded', params: { width: this.sidenavMax } };
+        this.SIDENAV_STATES.COMPACT = { value: 'compact', params: {width: this.sidenavMin } };
+
+        this.CONTENT_STATES.MOBILE = { value: 'expanded', params: { marginLeft: 0 } };
+        this.CONTENT_STATES.EXPANDED = { value: 'expanded', params: { marginLeft: this.sidenavMin } };
+        this.CONTENT_STATES.COMPACT = { value: 'compact', params: { marginLeft: this.sidenavMax } };
+
+        this.mediaQueryList.addListener(this.onMediaQueryChange);
+
+        if (this.isMobileScreenSize) {
+            this.sidenavAnimationState = this.SIDENAV_STATES.MOBILE;
+            this.contentAnimationState = this.CONTENT_STATES.MOBILE;
+        } else if (this.expandedSidenav) {
+            this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
+            this.contentAnimationState = this.CONTENT_STATES.COMPACT;
+        } else {
+            this.sidenavAnimationState = this.SIDENAV_STATES.COMPACT;
+            this.contentAnimationState = this.CONTENT_STATES.EXPANDED;
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.mediaQueryList.removeListener(this.onMediaQueryChange);
+    }
+
+    toggleMenu(): void {
+        if (this.isMobileScreenSize) {
+            this.sidenav.toggle();
+        } else {
+            this.sidenavAnimationState = this.toggledSidenavAnimation;
+            this.contentAnimationState = this.toggledContentAnimation;
+        }
+    }
+
+    private get toggledSidenavAnimation() {
+        return this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED
+            ? this.SIDENAV_STATES.COMPACT
+            : this.SIDENAV_STATES.EXPANDED;
+    }
+
+    private get toggledContentAnimation() {
+        if (this.isMobileScreenSize) {
+            return this.CONTENT_STATES.MOBILE;
+        }
+
+        if (this.sidenavAnimationState === this.SIDENAV_STATES.EXPANDED) {
+            return this.CONTENT_STATES.COMPACT;
+        } else {
+            return this.CONTENT_STATES.EXPANDED;
+        }
+    }
+
+    get isMobileScreenSize(): boolean {
+        return this.mediaQueryList.matches;
+    }
+
+    private onMediaQueryChange() {
+        this.sidenavAnimationState = this.SIDENAV_STATES.EXPANDED;
+        this.contentAnimationState = this.toggledContentAnimation;
+    }
+}

lib/core/layout/components/sidebar-action/sidebar-action-menu.component.html

@@ -0,0 +1,16 @@
+<div class="adf-sidebar-action-menu">
+    <button *ngIf="isExpanded()" mat-raised-button class="adf-sidebar-action-menu-button" data-automation-id="create-button" [matMenuTriggerFor]="adfSidebarMenu">
+        <span *ngIf="title" class="adf-sidebar-action-menu-text">{{ title }}</span>
+        <ng-content select="[sidebar-menu-title-icon]"></ng-content>
+    </button>
+
+    <div *ngIf="!isExpanded()" class="adf-sidebar-action-menu-icon" [matMenuTriggerFor]="adfSidebarMenu">
+        <ng-content select="[sidebar-menu-expand-icon]"></ng-content>
+    </div>
+
+    <mat-menu #adfSidebarMenu="matMenu" class="adf-sidebar-action-menu-panel" [overlapTrigger]="false" yPosition="below">
+        <div class="adf-sidebar-action-menu-options" [style.width.px]="width">
+            <ng-content select="[sidebar-menu-options]"></ng-content>
+        </div>
+    </mat-menu>
+</div>

lib/core/layout/components/sidebar-action/sidebar-action-menu.component.scss

@@ -0,0 +1,65 @@
+@mixin  adf-sidebar-action-menu-theme($theme) {
+
+    $primary: map-get($theme, primary);
+    $foreground: map-get($theme, foreground);
+
+    $adf-sidebar-action-menu-button-height: 37.5px;
+    $adf-sidebar-action-menu-button-border-radius: 4px;
+    $adf-sidebar-action-menu-opacity: 0.54;
+    $adf-sidebar-action-menu-item-opacity: 0.87;
+    $adf-sidebar-action-menu-item-line-spacing: -0.4px;
+    $adf-sidebar-action-menu-item-font-size: 14px;
+
+    .adf {
+        &-sidebar-action-menu {
+            & .mat-raised-button {
+                width: 100%;
+                display: block;
+                box-shadow: none !important;
+                height: $adf-sidebar-action-menu-button-height;
+                font-weight: bold;
+                background-color: mat-color($primary);
+                color: mat-color($primary, default-contrast) !important;
+                border-radius: $adf-sidebar-action-menu-button-border-radius;
+                & mat-icon {
+                    width: 24px;
+                    height: 25px;
+                    color: mat-color($primary, default-contrast) !important;
+                }
+            }
+            &-text {
+                width: 100%;
+                height: 20px;
+                text-align: left;
+            }
+        }
+        &-sidebar-action-menu-icon {
+            margin: 18px 0px 0px 20px;
+            color: mat-color($foreground, text, $adf-sidebar-action-menu-opacity);
+            cursor: pointer;
+            &:hover {
+                color: mat-color($primary);
+            }
+        }
+        &-sidebar-action-menu-options {
+            text-align: left;
+            letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
+            .mat-menu-item {
+                font-size: $adf-sidebar-action-menu-item-font-size;
+                color: mat-color($foreground, text, $adf-sidebar-action-menu-item-opacity);
+                text-align: left;
+                line-height: 1.5;
+                letter-spacing: $adf-sidebar-action-menu-item-line-spacing;
+            }
+            .mat-menu-item:hover {
+                color: mat-color($primary);
+                opacity: inherit;
+            }
+        }
+        &-sidebar-action-menu-panel {
+            margin-top: 7.5px;
+            border-radius: 2px;
+            box-shadow: #{map-get($_umbra-elevation-map, 2)}, #{map-get($_penumbra-elevation-map, 2)},#{map-get($_ambient-elevation-map, 2)};
+        }
+    }
+}

lib/core/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts

@@ -0,0 +1,148 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MaterialModule } from '../../../material.module';
+import { SidebarActionMenuComponent } from './sidebar-action-menu.component';
+import { setupTestBed } from '../../../testing/setupTestBed';
+import { CoreTestingModule } from '../../../testing/core.testing.module';
+
+describe('SidebarActionMenuComponent', () => {
+    let element: HTMLElement;
+    let component: SidebarActionMenuComponent;
+    let fixture: ComponentFixture<SidebarActionMenuComponent>;
+
+    setupTestBed({
+        imports: [CoreTestingModule]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SidebarActionMenuComponent);
+        element = fixture.nativeElement;
+        component = fixture.componentInstance;
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+    });
+
+    it('should create instance of SidebarActionMenuComponent', () => {
+        expect(fixture.componentInstance instanceof SidebarActionMenuComponent).toBe(true, 'should create SidebarActionMenuComponent');
+    });
+
+    it('should display title', () => {
+        component.title = 'Fake-Title';
+        component.expanded = true;
+        fixture.detectChanges();
+        const title = element.querySelector('.adf-sidebar-action-menu-text');
+        fixture.detectChanges();
+        expect(title.textContent).toBe('Fake-Title');
+    });
+});
+
+@Component({
+    template: `
+    <adf-sidebar-action-menu [expanded]="expanded" [title]="title">
+    <mat-icon sidebar-menu-title-icon>arrow_drop_down</mat-icon>
+    <div sidebar-menu-expand-icon>
+        <mat-icon>queue</mat-icon>
+    </div>
+    <div sidebar-menu-options>
+        <button mat-menu-item>
+            <mat-icon>assignment</mat-icon>
+            <span>Option1</span>
+        </button>
+        <button mat-menu-item>
+            <mat-icon>assignment</mat-icon>
+            <span>Option2</span>
+        </button>
+    </div>
+</adf-sidebar-action-menu>
+       `
+})
+class CustomSidebarActionMenuComponent {
+    title: string = 'Fake title';
+    expanded: boolean = true;
+}
+
+describe('Custom SidebarActionMenuComponent', () => {
+    let fixture: ComponentFixture<CustomSidebarActionMenuComponent>;
+    let component: CustomSidebarActionMenuComponent;
+    let element: HTMLElement;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [
+                SidebarActionMenuComponent,
+                CustomSidebarActionMenuComponent
+            ],
+            imports: [
+                MaterialModule
+            ]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(CustomSidebarActionMenuComponent);
+        fixture.detectChanges();
+        component = fixture.componentInstance;
+        element = fixture.nativeElement;
+    });
+
+    it('should create instance of CustomSidebarActionMenuComponent', () => {
+        expect(component instanceof CustomSidebarActionMenuComponent).toBe(true, 'should create CustomSidebarActionMenuComponent');
+    });
+
+    it('should defined adf-sidebar-action-menu', () => {
+        fixture.detectChanges();
+        element = fixture.nativeElement.querySelector('adf-sidebar-action-menu');
+        expect(element).toBeDefined();
+    });
+
+    it('should display the title', () => {
+        component.title = 'FakeTitle';
+        fixture.detectChanges();
+        const title = element.querySelector('.adf-sidebar-action-menu-text');
+        fixture.detectChanges();
+        expect(title.textContent).toBe('FakeTitle');
+    });
+
+    it('should render the sidebar-menu-options', () => {
+        fixture.detectChanges();
+        const actionButton = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-button');
+        const options = fixture.nativeElement.querySelectorAll('.adf-sidebar-action-menu-options');
+        actionButton.click();
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            expect(actionButton).not.toBeNull();
+            expect(actionButton).toBeDefined();
+            expect(options).toBeDefined();
+            expect(actionButton.innerText.trim()).toBe('Fake title arrow_drop_down');
+        });
+    });
+
+    it('should show icon on icon menu', () => {
+        component.title = 'FakeTitle';
+        component.expanded = false;
+        fixture.detectChanges();
+        const actionIcon = fixture.nativeElement.querySelector('.adf-sidebar-action-menu-icon');
+        expect(actionIcon).not.toBeNull();
+        expect(actionIcon).toBeDefined();
+        expect(actionIcon.innerText.trim()).toBe('queue');
+    });
+});

lib/core/layout/components/sidebar-action/sidebar-action-menu.component.ts

@@ -0,0 +1,49 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeDetectionStrategy, Component, Directive, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'adf-sidebar-action-menu',
+    templateUrl: './sidebar-action-menu.component.html',
+    styleUrls: ['./sidebar-action-menu.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None,
+    host: { 'class': 'adf-sidebar-action-menu' }
+})
+
+export class SidebarActionMenuComponent {
+
+    /** The title of the sidebar action. */
+    @Input()
+    title: string;
+
+    /** Toggle the sidebar action menu on expand. */
+    @Input()
+    expanded: boolean;
+
+    @Input()
+    width: number = 272;
+
+    isExpanded(): boolean {
+        return this.expanded;
+    }
+}
+
+@Directive({ selector: '[sidebar-menu-options]' }) export class SidebarMenuDirective {}
+@Directive({ selector: '[sidebar-menu-title-icon]' }) export class SidebarMenuTitleIconDirective { }
+@Directive({ selector: '[sidebar-menu-expand-icon]' }) export class SidebarMenuExpandIconDirective { }

lib/core/layout/components/sidenav-layout/sidenav-layout.component.html

@@ -0,0 +1,26 @@
+<div class="sidenav-layout">
+    <ng-container *ngIf="!isHeaderInside">
+        <ng-container class="adf-sidenav-layout-outer-header" *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
+    </ng-container>
+
+    <adf-layout-container #container
+        [sidenavMin]="sidenavMin"
+        [sidenavMax]="sidenavMax"
+        [mediaQueryList]="mediaQueryList"
+        [hideSidenav]="hideSidenav"
+        [expandedSidenav]="expandedSidenav"
+        data-automation-id="adf-layout-container"
+        class="layout__content">
+
+        <ng-container app-layout-navigation *ngTemplateOutlet="navigationTemplate; context:templateContext"></ng-container>
+
+        <ng-container app-layout-content>
+            <ng-container *ngIf="isHeaderInside">
+                <ng-container *ngTemplateOutlet="headerTemplate; context:templateContext"></ng-container>
+            </ng-container>
+            <ng-container *ngTemplateOutlet="contentTemplate; context:templateContext"></ng-container>
+        </ng-container>
+    </adf-layout-container>
+</div>
+
+<ng-template #emptyTemplate></ng-template>

lib/core/layout/components/sidenav-layout/sidenav-layout.component.scss

@@ -0,0 +1,18 @@
+:host {
+    display: flex;
+    flex: 1;
+
+    .sidenav-layout {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+
+        .layout__content {
+            flex: 1 1 auto;
+        }
+    }
+
+    router-outlet {
+        flex: 0 0;
+    }
+}

lib/core/layout/components/sidenav-layout/sidenav-layout.component.spec.ts

@@ -0,0 +1,328 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*tslint:disable: ban*/
+
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { SidenavLayoutComponent } from './sidenav-layout.component';
+import { Component, Input } from '@angular/core';
+import { LayoutModule, MediaMatcher } from '@angular/cdk/layout';
+import { PlatformModule } from '@angular/cdk/platform';
+import { MaterialModule } from '../../../material.module';
+import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
+import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
+import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'adf-layout-container',
+    template: `
+        <ng-content select="[app-layout-navigation]"></ng-content>
+        <ng-content select="[app-layout-content]"></ng-content>`
+})
+export class DummyLayoutContainerComponent {
+    @Input() sidenavMin: number;
+    @Input() sidenavMax: number;
+    @Input() mediaQueryList: MediaQueryList;
+    @Input() hideSidenav: boolean;
+    @Input() expandedSidenav: boolean;
+    toggleMenu () {}
+}
+
+describe('SidenavLayoutComponent', () => {
+
+    let fixture: ComponentFixture<any>,
+        mediaMatcher: MediaMatcher,
+        mediaQueryList: any;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [
+                CommonModule,
+                PlatformModule,
+                LayoutModule,
+                MaterialModule
+            ],
+            declarations: [
+                DummyLayoutContainerComponent,
+                SidenavLayoutComponent,
+                SidenavLayoutContentDirective,
+                SidenavLayoutHeaderDirective,
+                SidenavLayoutNavigationDirective
+            ],
+            providers: [
+                MediaMatcher
+            ]
+        });
+    }));
+
+    beforeEach(() => {
+        mediaQueryList = {
+            matches: false,
+            addListener: () => {},
+            removeListener: () => {}
+        };
+    });
+
+    afterEach(() => {
+        fixture.destroy();
+        TestBed.resetTestingModule();
+    });
+
+    describe('Template transclusion', () => {
+
+        @Component({
+            selector: 'adf-test-component-for-sidenav',
+            template: `
+            <adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="320" [stepOver]="600" [hideSidenav]="false">
+
+                <adf-sidenav-layout-header>
+                    <ng-template let-toggleMenu="toggleMenu">
+                        <div id="header-test" (click)="toggleMenu()"></div>
+                    </ng-template>
+                </adf-sidenav-layout-header>
+
+                <adf-sidenav-layout-navigation>
+                    <ng-template let-isMenuMinimized="isMenuMinimized">
+                        <div id="nav-test">{{ isMenuMinimized !== undefined ? 'variable-is-injected' : 'variable-is-not-injected' }}</div>
+                    </ng-template>
+                </adf-sidenav-layout-navigation>
+
+                <adf-sidenav-layout-content>
+                    <ng-template>
+                        <div id="content-test"></div>
+                    </ng-template>
+                </adf-sidenav-layout-content>
+            </adf-sidenav-layout>`
+        })
+        class SidenavLayoutTesterComponent {}
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({ declarations: [ SidenavLayoutTesterComponent ] }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            mediaMatcher = TestBed.get(MediaMatcher);
+            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
+
+            fixture = TestBed.createComponent(SidenavLayoutTesterComponent);
+            fixture.detectChanges();
+        });
+
+        describe('adf-sidenav-layout-navigation', () => {
+
+            const injectedElementSelector = By.css('[data-automation-id="adf-layout-container"] #nav-test');
+
+            it('should contain the transcluded side navigation template', () => {
+                const injectedElement = fixture.debugElement.query(injectedElementSelector);
+
+                expect(injectedElement === null).toBe(false);
+            });
+
+            it('should let the isMenuMinimized property of component to be accessed by the transcluded template', () => {
+                const injectedElement = fixture.debugElement.query(injectedElementSelector);
+
+                expect(injectedElement.nativeElement.innerText.trim()).toBe('variable-is-injected');
+            });
+        });
+
+        describe('adf-sidenav-layout-header', () => {
+
+            const outerHeaderSelector = By.css('.sidenav-layout > #header-test'),
+                innerHeaderSelector = By.css('.sidenav-layout [data-automation-id="adf-layout-container"] #header-test');
+
+            it('should contain the transcluded header template outside of the layout-container', () => {
+                mediaQueryList.matches = false;
+                fixture.detectChanges();
+                const outerHeaderElement = fixture.debugElement.query(outerHeaderSelector);
+                const innerHeaderElement = fixture.debugElement.query(innerHeaderSelector);
+
+                expect(outerHeaderElement === null).toBe(false, 'Outer header should be shown');
+                expect(innerHeaderElement === null).toBe(true, 'Inner header should not be shown');
+            });
+
+            it('should contain the transcluded header template inside of the layout-container', () => {
+                mediaQueryList.matches = true;
+                fixture.detectChanges();
+                const outerHeaderElement = fixture.debugElement.query(outerHeaderSelector);
+                const innerHeaderElement = fixture.debugElement.query(innerHeaderSelector);
+
+                expect(outerHeaderElement === null).toBe(true, 'Outer header should not be shown');
+                expect(innerHeaderElement === null).toBe(false, 'Inner header should be shown');
+            });
+
+            it('should call through the layout container\'s toggleMenu method', () => {
+                mediaQueryList.matches = false;
+                fixture.detectChanges();
+                const layoutContainerComponent = fixture.debugElement.query(By.directive(DummyLayoutContainerComponent)).componentInstance;
+                spyOn(layoutContainerComponent, 'toggleMenu');
+
+                const outerHeaderElement = fixture.debugElement.query(outerHeaderSelector);
+                outerHeaderElement.triggerEventHandler('click', {});
+
+                expect(layoutContainerComponent.toggleMenu).toHaveBeenCalled();
+            });
+        });
+
+        describe('adf-sidenav-layout-content', () => {
+
+            const injectedElementSelector = By.css('[data-automation-id="adf-layout-container"] #content-test');
+
+            it('should contain the transcluded content template', () => {
+                const injectedElement = fixture.debugElement.query(injectedElementSelector);
+
+                expect(injectedElement === null).toBe(false);
+            });
+        });
+    });
+
+    describe('General behaviour', () => {
+
+        let component: SidenavLayoutComponent;
+
+        beforeEach(async(() => {
+            TestBed.compileComponents();
+        }));
+
+        beforeEach(() => {
+            mediaMatcher = TestBed.get(MediaMatcher);
+            spyOn(mediaMatcher, 'matchMedia').and.callFake((mediaQuery) => {
+                mediaQueryList.originalMediaQueryPassed = mediaQuery;
+                spyOn(mediaQueryList, 'addListener').and.stub();
+                spyOn(mediaQueryList, 'removeListener').and.stub();
+                return mediaQueryList;
+            });
+
+            fixture = TestBed.createComponent(SidenavLayoutComponent);
+            component = fixture.componentInstance;
+            fixture.detectChanges();
+        });
+
+        it('should pass through input paramters', () => {
+            component.sidenavMin = 1;
+            component.sidenavMax = 2;
+            component.hideSidenav = true;
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            const layoutContainerComponent = fixture.debugElement.query(By.directive(DummyLayoutContainerComponent)).componentInstance;
+
+            expect(layoutContainerComponent.sidenavMin).toBe(component.sidenavMin);
+            expect(layoutContainerComponent.sidenavMax).toBe(component.sidenavMax);
+            expect(layoutContainerComponent.hideSidenav).toBe(component.hideSidenav);
+            expect(layoutContainerComponent.expandedSidenav).toBe(component.expandedSidenav);
+            expect(layoutContainerComponent.mediaQueryList.originalMediaQueryPassed).toBe(`(max-width: 600px)`);
+        });
+
+        it('addListener of mediaQueryList should have been called', () => {
+            expect(mediaQueryList.addListener).toHaveBeenCalledTimes(1);
+            expect(mediaQueryList.addListener).toHaveBeenCalledWith(component.onMediaQueryChange);
+        });
+
+        it('addListener of mediaQueryList should have been called', () => {
+            fixture.destroy();
+
+            expect(mediaQueryList.removeListener).toHaveBeenCalledTimes(1);
+            expect(mediaQueryList.removeListener).toHaveBeenCalledWith(component.onMediaQueryChange);
+        });
+    });
+
+    describe('toggleMenu', () => {
+
+        let component;
+
+        beforeEach(async(() => {
+            TestBed.compileComponents();
+        }));
+
+        beforeEach(() => {
+            mediaMatcher = TestBed.get(MediaMatcher);
+            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
+
+            fixture = TestBed.createComponent(SidenavLayoutComponent);
+            component = fixture.componentInstance;
+            fixture.detectChanges();
+        });
+
+        it('should toggle the isMenuMinimized if the mediaQueryList.matches is false (we are on desktop)', () => {
+            mediaQueryList.matches = false;
+            component.isMenuMinimized = false;
+
+            component.toggleMenu();
+
+            expect(component.isMenuMinimized).toBe(true);
+        });
+
+        it('should set the isMenuMinimized to false if the mediaQueryList.matches is true (we are on mobile)', () => {
+            mediaQueryList.matches = true;
+            component.isMenuMinimized = true;
+
+            component.toggleMenu();
+
+            expect(component.isMenuMinimized).toBe(false);
+        });
+    });
+
+    describe('menuOpenState', () => {
+
+        let component;
+
+        beforeEach(async(() => {
+            TestBed.compileComponents();
+        }));
+
+        beforeEach(() => {
+            mediaMatcher = TestBed.get(MediaMatcher);
+            spyOn(mediaMatcher, 'matchMedia').and.returnValue(mediaQueryList);
+
+            fixture = TestBed.createComponent(SidenavLayoutComponent);
+            component = fixture.componentInstance;
+        });
+
+        it('should be true by default', (done) => {
+            fixture.detectChanges();
+
+            component.menuOpenState$.subscribe((value) => {
+                expect(value).toBe(true);
+                done();
+            });
+        });
+
+        it('should be the same as the expandedSidenav\'s value by default', (done) => {
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            component.menuOpenState$.subscribe((value) => {
+                expect(value).toBe(false);
+                done();
+            });
+        });
+
+        it('should emit value on toggleMenu action', (done) => {
+            component.expandedSidenav = false;
+            fixture.detectChanges();
+
+            component.toggleMenu();
+
+            component.menuOpenState$.subscribe((value) => {
+                expect(value).toBe(true);
+                done();
+            });
+        });
+    });
+});

lib/core/layout/components/sidenav-layout/sidenav-layout.component.ts

@@ -0,0 +1,126 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Component, ContentChild, Input, Output, OnInit, AfterViewInit, ViewChild, OnDestroy, TemplateRef, EventEmitter } from '@angular/core';
+import { MediaMatcher } from '@angular/cdk/layout';
+import { SidenavLayoutContentDirective } from '../../directives/sidenav-layout-content.directive';
+import { SidenavLayoutHeaderDirective } from '../../directives/sidenav-layout-header.directive';
+import { SidenavLayoutNavigationDirective } from '../../directives/sidenav-layout-navigation.directive';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Observable';
+
+@Component({
+    selector: 'adf-sidenav-layout',
+    templateUrl: './sidenav-layout.component.html',
+    styleUrls: ['./sidenav-layout.component.scss']
+})
+export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
+
+    static STEP_OVER = 600;
+
+    @Input() sidenavMin: number;
+    @Input() sidenavMax: number;
+    @Input() stepOver: number;
+    @Input() hideSidenav = false;
+    @Input() expandedSidenav = true;
+
+    @Output() expanded = new EventEmitter<boolean>();
+
+    @ContentChild(SidenavLayoutHeaderDirective) headerDirective: SidenavLayoutHeaderDirective;
+    @ContentChild(SidenavLayoutNavigationDirective) navigationDirective: SidenavLayoutNavigationDirective;
+    @ContentChild(SidenavLayoutContentDirective) contentDirective: SidenavLayoutContentDirective;
+
+    private menuOpenStateSubject: BehaviorSubject<boolean>;
+    public menuOpenState$: Observable<boolean>;
+
+    @ViewChild('container') container: any;
+    @ViewChild('emptyTemplate') emptyTemplate: any;
+
+    mediaQueryList: MediaQueryList;
+    _isMenuMinimized;
+
+    templateContext = {
+        toggleMenu: () => {},
+        isMenuMinimized: () => this.isMenuMinimized
+    };
+
+    constructor(private mediaMatcher: MediaMatcher) {
+        this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
+    }
+
+    ngOnInit() {
+        const initialMenuState = !this.expandedSidenav;
+
+        this.menuOpenStateSubject = new BehaviorSubject<boolean>(initialMenuState);
+        this.menuOpenState$ = this.menuOpenStateSubject.asObservable();
+
+        const stepOver = this.stepOver || SidenavLayoutComponent.STEP_OVER;
+        this.isMenuMinimized = initialMenuState;
+
+        this.mediaQueryList = this.mediaMatcher.matchMedia(`(max-width: ${stepOver}px)`);
+        this.mediaQueryList.addListener(this.onMediaQueryChange);
+    }
+
+    ngAfterViewInit() {
+        this.templateContext.toggleMenu = this.toggleMenu.bind(this);
+    }
+
+    ngOnDestroy(): void {
+        this.mediaQueryList.removeListener(this.onMediaQueryChange);
+    }
+
+    toggleMenu() {
+        if (!this.mediaQueryList.matches) {
+            this.isMenuMinimized = !this.isMenuMinimized;
+        } else {
+            this.isMenuMinimized = false;
+        }
+
+        this.container.toggleMenu();
+        this.expanded.emit(!this.isMenuMinimized);
+    }
+
+    get isMenuMinimized() {
+        return this._isMenuMinimized;
+    }
+
+    set isMenuMinimized(menuState: boolean) {
+        this._isMenuMinimized = menuState;
+        this.menuOpenStateSubject.next(!menuState);
+    }
+
+    get isHeaderInside() {
+        return this.mediaQueryList.matches;
+    }
+
+    get headerTemplate(): TemplateRef<any> {
+        return this.headerDirective && this.headerDirective.template || this.emptyTemplate;
+    }
+
+    get navigationTemplate(): TemplateRef<any> {
+        return this.navigationDirective && this.navigationDirective.template || this.emptyTemplate;
+    }
+
+    get contentTemplate(): TemplateRef<any> {
+        return this.contentDirective && this.contentDirective.template || this.emptyTemplate;
+    }
+
+    onMediaQueryChange() {
+        this.isMenuMinimized = false;
+        this.expanded.emit(!this.isMenuMinimized);
+    }
+}