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

<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="220" [stepOver]="780" [hideSidenav]="false"[expandedSidenav]= "expandedSidenav" (expanded)="setState($event)">

    <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>

                <span fxFlex="1 1 auto" fxShow fxHide.lt-sm="true">{{'APP_LAYOUT.APP_NAME' | translate }}</span>

                <div class="adf-app-layout-menu-spacer"></div>

                <app-search-bar fxFlex="0 1 auto"></app-search-bar>

                <adf-userinfo
                    class="adf-app-layout-user-profile"
                    [menuPositionX]="'before'"
                    [menuPositionY]="'above'">
                </adf-userinfo>

                <app-theme-picker></app-theme-picker>
                <button mat-icon-button [matMenuTriggerFor]="langMenu">
                    <mat-icon>language</mat-icon>
                </button>
                <mat-menu #langMenu="matMenu" class="adf-menu">
                    <adf-language-menu></adf-language-menu>
                </mat-menu>
            </mat-toolbar>
        </ng-template>
    </adf-sidenav-layout-header>

    <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" [attr.data-automation-id]="link.title | translate" [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>
<app-log></app-log>