[ADF-2559] Sidenav layout (#3119)

* First step of extraction

* Add sidenav-layout to demo-shell

* Fix some sidenav-layout styles

* Fix tests

* Add documentation

* Fix typescript transpiler's stomache

* Modify component's directive's interface

* Enrich documentation

* Another documentation enrichment

* Fix tests and mobile expanded issue

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -1,47 +1,55 @@
-<mat-sidenav-container class="adf-nav-container">
-    <mat-sidenav #sidenav class="adf-sidenav" position="end" mode="push">
-        <mat-nav-list>
-            <a mat-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()" class="adf-sidenav-link">
-                <mat-icon matListIcon>{{link.icon}}</mat-icon>
-                <span>{{link.title | translate }}</span>
-            </a>
-            <a mat-list-item adf-logout (click)="sidenav.close()">
-                <mat-icon matListIcon>exit_to_app</mat-icon>
-                <span>Logout</span>
-            </a>
-        </mat-nav-list>
-    </mat-sidenav>
 
-    <mat-toolbar color="primary" class="adf-app-layout-toolbar mat-elevation-z6">
-        <adf-userinfo
-            class="adf-app-layout-user-profile"
-            [menuPositionX]="'before'"
-            [menuPositionY]="'above'">
-        </adf-userinfo>
+<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="600" [hideSidenav]="false" [expandedSidenav]="false">
 
-        <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>
+    <adf-sidenav-layout-header>
+        <ng-template let-toggleMenu="toggleMenu">
+            <mat-toolbar color="primary" class="adf-app-layout-toolbar mat-elevation-z6">
+                <button mat-icon-button (click)="toggleMenu()">
+                    <mat-icon>menu</mat-icon>
+                </button>
 
-        <div class="adf-app-layout-menu-spacer"></div>
+                <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>
 
-        <app-search-bar fxFlex="0 1 auto"></app-search-bar>
+                <div class="adf-app-layout-menu-spacer"></div>
 
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="home" href="" routerLink="/home" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.HOME' | translate }}</a>
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="files" href="" routerLink="/files" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.CONTENT_SERVICES' | translate }}</a>
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true"  mat-button data-automation-id="activiti" href="" routerLink="/activiti" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">{{'APP_LAYOUT.PROCESS_SERVICES' | translate }}</a>
-        <a fxFlex="0 0 auto" class="adf-toolbar-link" fxShow fxHide.lt-md="true" mat-button data-automation-id="login" href="" routerLink="/login">Login</a>
+                <app-search-bar fxFlex="0 1 auto"></app-search-bar>
 
-        <app-theme-picker></app-theme-picker>
-        <button mat-icon-button [matMenuTriggerFor]="langMenu">
-            <mat-icon>language</mat-icon>
-        </button>
-        <mat-menu #langMenu="matMenu">
-            <adf-language-menu></adf-language-menu>
-        </mat-menu>
+                <adf-userinfo
+                    class="adf-app-layout-user-profile"
+                    [menuPositionX]="'before'"
+                    [menuPositionY]="'above'">
+                </adf-userinfo>
 
-        <button mat-icon-button (click)="sidenav.open()">
-            <mat-icon>menu</mat-icon>
-        </button>
-    </mat-toolbar>
+                <app-theme-picker></app-theme-picker>
+                <button mat-icon-button [matMenuTriggerFor]="langMenu">
+                    <mat-icon>language</mat-icon>
+                </button>
+                <mat-menu #langMenu="matMenu">
+                    <adf-language-menu></adf-language-menu>
+                </mat-menu>
+            </mat-toolbar>
+        </ng-template>
+    </adf-sidenav-layout-header>
 
-    <router-outlet></router-outlet>
-</mat-sidenav-container>
+    <adf-sidenav-layout-navigation>
+        <ng-template let-isMenuMinimized="isMenuMinimized">
+            <mat-nav-list class="adf-sidenav-linklist">
+                <a mat-list-item *ngFor="let link of links" [routerLink]="link.href" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" class="adf-sidenav-link">
+                    <mat-icon matListIcon class="sidenav-menu-icon">{{link.icon}}</mat-icon>
+                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">{{link.title | translate }}</div>
+                </a>
+                <a mat-list-item adf-logout class="adf-sidenav-link">
+                    <mat-icon matListIcon class="sidenav-menu-icon">exit_to_app</mat-icon>
+                    <div class="sidenav-menu-label" *ngIf="!isMenuMinimized()">Logout</div>
+                </a>
+            </mat-nav-list>
+        </ng-template>
+    </adf-sidenav-layout-navigation>
+
+    <adf-sidenav-layout-content>
+        <ng-template>
+            <router-outlet></router-outlet>
+        </ng-template>
+    </adf-sidenav-layout-content>
+
+</adf-sidenav-layout>

demo-shell/src/app/components/app-layout/app-layout.component.scss

@@ -1,5 +1,7 @@
 @mixin adf-app-layout-theme($theme) {
   $primary: map-get($theme, primary);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
   $minimumAppWidth: 320px;
   $toolbarHeight: 64px;
 
@@ -22,7 +24,8 @@
    }
 
   .adf-app-layout {
-    display: block;
+    display: flex;
+    flex: 1;
     min-width: $minimumAppWidth;
     height: 100%;
 
@@ -32,10 +35,32 @@
       height: 100%;
     }
 
+    .adf-sidenav-linklist {
+      height: 100%;
+      overflow: auto;
+      padding-bottom: 8px;
+      box-sizing: border-box;
+    }
+
     .adf-sidenav-link {
+
       &.active {
         color: mat-color($primary);
       }
+
+      .sidenav-menu-icon {
+        margin-right: 20px;
+        font-size: 14px;
+      }
+
+      .sidenav-menu-label {
+        font-size: 14px;
+        white-space: nowrap;
+      }
+    }
+
+    .mat-nav-list .mat-list-item.adf-sidenav-link {
+      height: 40px;
     }
 
     &-user-profile {

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -30,9 +30,9 @@ export class AppLayoutComponent {
     links: Array<any> = [
         { href: '/home', icon: 'home', title: 'APP_LAYOUT.HOME' },
         { href: '/files', icon: 'folder_open', title: 'APP_LAYOUT.CONTENT_SERVICES' },
-        { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
         { href: '/activiti', icon: 'device_hub', title: 'APP_LAYOUT.PROCESS_SERVICES' },
         { href: '/login', icon: 'vpn_key', title: 'APP_LAYOUT.LOGIN' },
+        { href: '/trashcan', icon: 'delete', title: 'APP_LAYOUT.TRASHCAN' },
         { href: '/dl-custom-sources', icon: 'extension', title: 'APP_LAYOUT.CUSTOM_SOURCES' },
         { href: '/datatable', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE' },
         { href: '/datatable-lazy', icon: 'view_module', title: 'APP_LAYOUT.DATATABLE_LAZY' },

demo-shell/src/app/components/home/home.component.html

@@ -1,4 +1,4 @@
-<header class="adf-home-background adf-primary-background-color">
+<header class="adf-home-background">
     <div class="adf-home-section ad">
         <div class="adf-home-headline">
             <h1 class="mat-h1">ADF</h1>

demo-shell/src/app/components/home/home.component.scss

@@ -1,3 +1,9 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .adf-home-header-background {
     overflow: hidden;
 }
@@ -8,6 +14,7 @@
 }
 
 .adf-home-headline {
+
     h1 {
         font-size: 56px;
         font-weight: 300;