mini sidenav variant

src/app/components/header/header.component.html

@@ -1,5 +1,9 @@
 <adf-toolbar class="app-menu" [style.background-color]="backgroundColor">
     <adf-toolbar-title>
+        <button mat-icon-button (click)="toggleMenu()">
+            <mat-icon>menu</mat-icon>
+        </button>
+
         <a class="app-menu__title"
             title="{{ appName }}"
             [routerLink]="[ '/' ]">

src/app/components/header/header.component.scss

@@ -1,6 +1,7 @@
 @import 'variables';
 
 .app-menu {
+    height: $app-menu-height;
 
     &.adf-toolbar {
         .mat-toolbar {
@@ -26,12 +27,20 @@
                 background-color: $alfresco-white !important;
             }
         }
+
+        .adf-toolbar-title {
+            color:  $alfresco-white;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+        }
     }
 
     .app-menu__title {
         width: 100px;
         height: 50px;
-        margin-left: 5px;
+        margin-left: 40px;
         display: flex;
         justify-content: center;
         align-items: stretch;

src/app/components/header/header.component.ts

@@ -24,7 +24,7 @@
  */
 
 import { DomSanitizer } from '@angular/platform-browser';
-import { Component, ViewEncapsulation, SecurityContext } from '@angular/core';
+import { Component, Output, EventEmitter, ViewEncapsulation, SecurityContext } from '@angular/core';
 import { AppConfigService } from '@alfresco/adf-core';
 
 @Component({
@@ -34,6 +34,8 @@ import { AppConfigService } from '@alfresco/adf-core';
     encapsulation: ViewEncapsulation.None
 })
 export class HeaderComponent {
+    @Output() menu: EventEmitter<any> = new EventEmitter<any>();
+
     private defaultPath = '/assets/images/alfresco-logo-white.svg';
     private defaultBackgroundColor = '#2196F3';
 
@@ -42,6 +44,10 @@ export class HeaderComponent {
         private sanitizer: DomSanitizer
     ) {}
 
+    toggleMenu() {
+        this.menu.emit();
+    }
+
     get appName(): string {
         return <string>this.appConfig.get('application.name');
     }