<mat-toolbar class="mat-elevation-z1 stbui-background-white">
  <mat-toolbar-row>
    <stbui-brand class="stbui-background-blue" style="margin-left:-16px;" brand="Mail"></stbui-brand>

    <div fxFlex="auto"><stbui-search placeholder="搜索..."></stbui-search></div>
    <span fxFlex></span>
    <button mat-icon-button><mat-icon>apps</mat-icon></button>
    <stbui-toolbar-notification></stbui-toolbar-notification>
    <stbui-toolbar-user></stbui-toolbar-user>
    </mat-toolbar-row>
</mat-toolbar>

<div fxLayout="row" fxLayoutAlign="start start">
  <div class="sidenav" fxFlex="250px">
    <div class="compose-container">
      <div class="compose" matRipple (click)="openComposeDialog()">写邮件</div>
    </div>

    <div class="nav-list">
      <mat-nav-list>
        <mat-list-item class="active">
          <mat-icon matListIcon>mail</mat-icon>
           <span matLine>收件箱</span>
           <span>14</span>
          </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>start</mat-icon>
          <span matLine>已加星标</span>
        </mat-list-item>

        <mat-list-item>
          <mat-icon matListIcon>query_builder</mat-icon>
          <span matLine>已延后</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>label_important</mat-icon>
          <span matLine>重要邮件</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>send</mat-icon>
          <span matLine>已发邮件</span>
        </mat-list-item>

        <mat-list-item>
          <mat-icon matListIcon>insert_drive_file</mat-icon>
          <span matLine>草稿</span>
        </mat-list-item>
      </mat-nav-list>

      <mat-nav-list>
        <mat-list-item>
          <mat-icon matListIcon>mail</mat-icon>
          <span matLine>所有邮件</span>
        </mat-list-item>

        <mat-list-item>
          <mat-icon matListIcon>error</mat-icon>
          <span matLine>垃圾邮件</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>delete</mat-icon>
          <span matLine>已删除邮件</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>start</mat-icon>
          <span matLine>Receipts</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>label</mat-icon>
          <span matLine>Work</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>label</mat-icon>
          <span matLine>管理标签</span>
        </mat-list-item>
        <mat-list-item>
          <mat-icon matListIcon>settings</mat-icon>
          <span matLine>创建新标签</span>
        </mat-list-item>
      </mat-nav-list>
    </div>
  </div>

  <div class="mail-list" fxFlex>
    <app-mail-toolbar
      [mail]="shownMailDetail"
      [itemCount]="shownMails.length"
      (onForward)="onForward($event)"
    ></app-mail-toolbar>

    <app-mail-list
      *ngIf="!shownMailDetail"
      [mails]="shownMails | async"
      (onOpenMailDetial)="openMailDetial($event)"
    ></app-mail-list>

    <app-mail-detail
      *ngIf="shownMailDetail"
      [mail]="shownMailDetail"
    ></app-mail-detail>
  </div>
</div>

./mail.component.scss

.mail-list {
  overflow: hidden;
}

.compose-container {
  align-items: center;
  display: flex;
  height: 48px;
  margin: 16px 0;
  padding: 0 0 0 16px;
}

.compose {
  display: inline-flex;
  align-items: center;
  height: 48px;
  min-width: 56px;
  padding: 0 24px 0 0;
  border-radius: 24px;
  font-size: 14px;
  letter-spacing: 0.25px;
  background-color: #fff;
  background-image: none;
  color: #3c4043;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.302),
    0 1px 3px 1px rgba(60, 64, 67, 0.149);

  user-select: none;

  &::before {
    background-image: url(https://www.gstatic.com/images/icons/material/colored_icons/1x/create_32dp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px;
    content: '';
    display: block;
    height: 48px;
    min-width: 56px;
  }
}

@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {
  .compose {
    &::before {
      background-position: center;
      background-repeat: no-repeat;
      background-size: 32px;
      background-image: url(https://www.gstatic.com/images/icons/material/colored_icons/2x/create_32dp.png);
    }
  }
}

mat-nav-list {
  mat-list-item {
    border-radius: 0 48px 48px 0;
  }
  .active {
    background-color: #fce8e6;
    color: #d93025;
    font-weight: 700;
  }
}