<div [class]="'theme-wrapper ' + (theme$ | async)">

  <mat-sidenav-container>

    <mat-sidenav #sidenav mode="push">
      <div class="branding"><img [src]="logo" [alt]="logo"/>
        <span>{{ 'mev.title.short' | translate}}</span></div>
      <mat-nav-list>
        <a mat-list-item *ngFor="let item of navigationSideMenu" (click)="sidenav.close()" [routerLink]="[item.link]"
           routerLinkActive="active">
          {{item.label | translate}}
        </a>
        <a mat-list-item href="https://github.com/dfci-cccb/mev/issues" target="_blank" rel="noopener noreferrer">
          Github
        </a>
      </mat-nav-list>
    </mat-sidenav>

    <div class="wrapper">

      <div class="toolbar" [style.position]="(stickyHeader$ | async) ? 'fixed' : 'inherit'"
           [class.mat-elevation-z4]="(stickyHeader$ | async)">
        <mat-toolbar color="primary">
          <button mat-icon-button class="d-md-none" (click)="sidenav.open()">
            <fa-icon icon="bars"></fa-icon>

          </button>

          <span routerLink="" class="branding spacer center d-inline d-sm-none">
            <img [src]="logo" [alt]="logo"/></span>
          <span routerLink="" class="branding spacer center d-none d-sm-inline d-md-none"><img [src]="logo"
                                                                                               [alt]="logo"/> {{
            'mev.title.short' | translate }}</span>
          <span routerLink="" class="branding spacer d-none d-md-inline"><img [src]="logo" [alt]="logo"/>Web MeV</span>

          <span class="d-none d-md-inline">
            <button mat-button class="nav-button" *ngFor="let item of navigation" [routerLink]="[item.link]"
                    routerLinkActive="active">
              {{item.label | translate}}
            </button>
          </span>

          <!--button mat-button mat-stroked-button color="accent" *ngIf="!(isAuthenticated$ | async)" (click)="onLoginClick()">
            {{ 'mev.menu.login' | translate }}
          </button-->

          <!--button *ngIf="(isAuthenticated$ | async)"
                  mat-icon-button
                  [matMenuTriggerFor]="toolbarUserMenu">
            <fa-icon icon="user-circle"></fa-icon>
          </button-->
          <!--mat-menu #toolbarUserMenu="matMenu">
            <button mat-menu-item (click)="onLogoutClick()">
              <mat-icon><fa-icon icon="power-off"></fa-icon></mat-icon>
              <span>{{ 'mev.menu.logout' | translate }}</span>
            </button>
          </mat-menu-->

          <button mat-button mat-stroked-button color="accent" *ngIf="!isAuthenticated" routerLink="/login">
            {{ 'mev.menu.login' | translate }}
          </button>

          <button *ngIf="isAuthenticated"
                  mat-icon-button
                  [matMenuTriggerFor]="toolbarUserMenu">
            <fa-icon icon="user-circle"></fa-icon>
          </button>

          <mat-menu #toolbarUserMenu="matMenu">

            <button mat-menu-item routerLink="/change-password">
              <span *ngIf="socialUser" class="social-user-info">
                <span class="social-user-info__name">
                 {{ socialUser.name }}
               </span>
               <span class="social-user-info__email">
                 {{ socialUser.email }}
               </span>
               </span>

              <mat-icon>
                <fa-icon icon="lock"></fa-icon>
              </mat-icon>
              <span>Account security</span>
            </button>

            <button mat-menu-item (click)="onLogoutClick()">           
              <mat-icon>
                <fa-icon icon="power-off"></fa-icon>
              </mat-icon>
              <span>{{ 'mev.menu.logout' | translate }}</span>
            </button>

          </mat-menu>
          <!-- <button mat-icon-button routerLink="settings" class="d-none d-sm-inline">
            <fa-icon icon="cog"></fa-icon>
          </button> -->

          <a [matTooltip]="'mev.header.github' | translate"
             matTooltipPosition="before"
             mat-icon-button
             class="link d-none d-sm-inline"
             href="https://github.com/dfci-cccb/mev"
             target="_blank" rel="noopener noreferrer">
            <fa-icon [icon]="['fab','github']"></fa-icon>
          </a>

          <span *ngIf="language$ | async as language">
            <mat-select [ngModel]="language" (selectionChange)="onLanguageSelect($event)">
              <mat-option *ngFor="let l of languages" [value]="l">
                {{ l.toUpperCase() }}
              </mat-option>
            </mat-select>
          </span>
        </mat-toolbar>
      </div>

      <div class="content"
           [@routeAnimations]="o.isActivated && o.activatedRoute.routeConfig.data && o.activatedRoute.routeConfig.data.title">
        <router-outlet #o="outlet"></router-outlet>
        <router-outlet></router-outlet>
      </div>

      <div class="footer">
        <div class="row">
          <div class="col-sm-12 links">
            <a href="https://github.com/dfci-cccb/mev" target="_blank" rel="noopener noreferrer">
              <fa-icon [icon]="['fab','github']"></fa-icon>
              <span>Github</span>
            </a>
            <a href="https://twitter.com/webmev" target="_blank" rel="noopener noreferrer">
              <fa-icon [icon]="['fab','twitter']"></fa-icon>
              <span>Twitter</span>
            </a>
            <a href="https://www.youtube.com/channel/UCFrvYZDDiJ-Z-ZVKCH2pY9A"
               target="_blank" rel="noopener noreferrer">
              <fa-icon [icon]="['fab','youtube']"></fa-icon>
              <span>Youtube</span>
            </a>

          </div>
        </div>

      </div>

    </div>

  </mat-sidenav-container>

</div>

./app.component.scss

@import '../../styles-variables';

.theme-wrapper {
  height: 100%;
  width: 100%;
}

mat-sidenav-container {
  height: 100%;
  width: 100%;

  .toolbar {
    position: fixed;
    width: 100%;
    display: flex;
    z-index: 10;

    .nav-button {
      margin: 0 10px 0 0;
    }

    fa-icon {
      font-size: 24px;
    }

    .branding {
      cursor: pointer;
      overflow: hidden;
      padding-top: 4px;
      text-overflow: ellipsis;

      &.center {
        text-align: center;
      }

      img {
        position: relative;
        top: -2px;
        width: 48px;
        height: 48px;
      }
    }

    .mat-stroked-button {
      margin-right: 10px;
    }

    .spacer {
      flex: 1 1 auto;
    }

    mat-select {
      margin: 0 0 0 20px;
      width: 40px;
      font-size: 14px;
    }

    @media (max-width: map-get($grid-breakpoints, lg)) {
      .nav-button {
        min-width: 0;
        padding: 0 10px;
      }
    }
  }

  .wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;

    .content {
      flex: 1 0 auto;
      margin-top: 64px;
      overflow: hidden;
    }

    .footer {
      flex: 0 0 auto;
      padding: 0 15px;
      text-align: center;

      .row {
        padding: 10px 0;

        .links {
          a {
            transition: padding 0.5s;
            display: inline-block;
            padding: 0 5px !important;
            line-height: 35px;

            &:hover {
              text-decoration: none;
            }

            fa-icon {
              font-size: 35px;
              vertical-align: top;
            }

            span {
              display: inline-block;
              width: 75px;
              padding: 0 0 0 3px;
              overflow: hidden;
              text-align: left;
              white-space: nowrap;
              transition: width 0.5s;
            }
          }

          @media (min-width: map-get($grid-breakpoints, lg)) {
            a {
              padding: 20px 10px;
            }
          }

          @media (max-width: map-get($grid-breakpoints, md)) {
            a {
              padding: 20px;

              span {
                width: 0;
                padding: 0;
              }
            }
          }

          @media (max-width: map-get($grid-breakpoints, sm)) {
            a {
              padding: 20px 5px;
            }
          }
        }

        @media (min-width: map-get($grid-breakpoints, sm)) {
          .signature {
            position: relative;

            a {
              position: absolute;
              right: 15px;
            }
          }
        }
      }
    }
  }

  @media (max-width: $toolbar-breakpoint) {
    .content {
      margin-top: 56px !important;
    }
  }
}

mat-sidenav {
  width: 250px;

  .branding {
    height: 64px;
    padding: 8px 10px;
    font-size: 20px;
    font-weight: 500;

    img {
      height: 48px;
      margin: 2px 10px 0 0;
    }

    span {
      position: relative;
      top: 3px;
    }
  }

  .mat-nav-list {
    padding-top: 0;
  }
}

.mat-menu-item {
  height: auto;
}

.social-user-info {
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #202124;
  display: block;
}

.social-user-info__name {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
  font-family: 'Google Sans', Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  display: block;
}

.social-user-info__email {
  font-weight: 400;
  font-size: 14px;
  font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  display: block;
}