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

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

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

        <button mat-icon-button (click)="sidenav.open()">
            <mat-icon>menu</mat-icon>
        </button>
    </mat-toolbar>

    <router-outlet></router-outlet>
</mat-sidenav-container>
