edu-textbook/projects/textbook/src/app/comp-nav/comp-nav.component.html

<div class="bar">
  <nz-avatar
    (click)="goUrl('/profile')"
    nzIcon="user"
    style="background-color: #87d068;cursor: pointer;"
  ></nz-avatar>
  @if(!viewCollapsed){
  <div class="user">
    <div class="name">{{ tbookSer.profile?.name || "彭秀龙" }}</div>
    <div class="email">{{ tbookSer.profile?.email || "dayi@edu.com" }}</div>
  </div>
  <div class="more">
    <button
      mat-icon-button
      nzType="primary"
      nz-popover
      nzPopoverTitle="操作"
      [(nzPopoverVisible)]="visible"
      (nzPopoverVisibleChange)="change($event)"
      nzPopoverTrigger="click"
      [nzPopoverContent]="contentTemplate"
    >
      <mat-icon fontIcon="more"></mat-icon>
    </button>
    <ng-template #contentTemplate>
      <div style="display: flex; flex-direction: column">
        <a
          nz-button
          nzType="link"
          (click)="clickMe()"
          style="margin-bottom: 6px"
          >我的</a
        >
        <a nz-button nzType="link" (click)="clickMe()">退出登录</a>
      </div>
    </ng-template>
  </div>
  }
</div>