<div class="sidenav-container">
  <!-- <mat-toolbar>
    <div class="toolbar" fxLayout="row" fxLayoutAlign="start center">
      <img class="avatar pointer" [src]="avatar" /> <span fxFlex></span>
      <button mat-icon-button><mat-icon>phone</mat-icon></button>
      <button mat-icon-button [matMenuTriggerFor]="userMenu">
        <mat-icon>more_vert</mat-icon>
      </button>
    </div>
  </mat-toolbar> -->

  <mat-accordion>
    <mat-expansion-panel expanded>
      <mat-expansion-panel-header>
        <mat-panel-title> 我的对话 </mat-panel-title>
      </mat-expansion-panel-header>

      <mat-nav-list class="chat-contacts">
        <mat-list-item
          class="chat-contact"
          (click)="setActiveChat(chat)"
          *ngFor="let chat of chats"
          mat-ripple
        >
          <img [src]="chat.picture" mat-list-avatar />
          <h3 class="name" mat-line>{{ chat.name }}</h3>
          <p class="last-message" mat-line>{{ chat.lastMessage }}</p>
        </mat-list-item>
      </mat-nav-list>
    </mat-expansion-panel>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title> 同事的对话 </mat-panel-title>
      </mat-expansion-panel-header>
      <mat-nav-list class="chat-contacts">
        <mat-list-item
          class="chat-contact"
          (click)="setActiveChat(chat)"
          *ngFor="let chat of chats"
          mat-ripple
        >
          <img [src]="chat.picture" mat-list-avatar />
          <h3 class="name" mat-line>{{ chat.name }}</h3>
          <p class="last-message" mat-line>{{ chat.lastMessage }}</p>
        </mat-list-item>
      </mat-nav-list>
    </mat-expansion-panel>
  </mat-accordion>
</div>

<mat-menu #userMenu="matMenu">
  <button mat-menu-item>
    <mat-icon> account_circle </mat-icon>
    <span> 我 </span>
  </button>
  <button mat-menu-item>
    <mat-icon> settings </mat-icon>
    <span> 设置 </span>
  </button>
  <button mat-menu-item>
    <mat-icon>help</mat-icon>
    <span>帮助</span>
  </button>
  <mat-divider></mat-divider>
  <button mat-menu-item>
    <mat-icon> exit_to_app </mat-icon>
    <span> 退出 </span>
  </button>
</mat-menu>

$height__chat-header: 150px;
$height__chat-toolbar: 64px;
$height__chat-container: calc(
  100% - #{$height__chat-header - $height__chat-toolbar}
);

mat-toolbar {
  border-bottom: 1px solid #eee;
  .toolbar {
    width: 100%;
  }
  .current-contact {
    .avatar {
      margin: 0 14px 0 10px;
    }
    .name {
      font-size: 18px;
      font-weight: 500;
    }
    .status {
      font-size: 14px;
      color: #888;
    }
  }
}
.chat-contacts-container {
  height: calc(100% - #{$height__chat-toolbar});
  .chat-contacts {
    padding-top: 0;
    .chat-contact {
      position: relative;
      cursor: pointer;
      transition: background 0.1s linear;
      &:hover {
        background: #eee;
      }
      .last-message {
        color: #888;
      }
    }
  }
}
.sidenav-container,
.sidenav-scrollbar-container {
  height: 100%;
}
mat-nav-list {
  height: 630px;
  margin: 0 -24px;
  margin-bottom: -16px;
  background-color: #fbfcfe;
}