Выделите элемент боковой панели в соответствии с прогрессом

У меня есть боковая панель для отображения хода выполнения задания. Сейчас у меня три фазы.

В начале проект еще не запущен, поэтому я хочу, чтобы все элементы боковой панели были выделены серым цветом. Я хочу, чтобы текущая фаза основывалась на завершении предыдущих фаз. С правой стороны есть три кнопки. Вот логика.

1. Работаем над этапом 1. Когда я работаю над этапом 1, элемент боковой панели «Фаза 1» активен и имеет зеленый цвет. Элементы фазы 2 и фазы 3 по-прежнему неактивны.
2. Работаем над этапом 2. Когда я нажимаю кнопку «Фаза 1 завершена», мы переходим к фазе 2, Фаза 2 окрашивается в зеленый цвет, а Фаза 1 все еще активна, но не имеет цвета.
3. Работаем над этапом 3. Когда я нажимаю кнопку завершения фазы 2, мы переходим к фазе 3, фаза 3 окрашена в зеленый цвет, а фаза 1 и фаза 2 активны, но не имеют цвета.
4. Когда мы переходим к следующему этапу, элементы предыдущего этапа имеют видимые границы.

Мой код ТС:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css']
})
export class SidenavComponent implements OnInit {

  sidenavWidth = 10;
  ngStyle: string;
  active1: boolean;
  active2: boolean;
  active3: boolean;
  constructor() {

  }

  ngOnInit() {
    this.active1 = false;
    this.active2 = false;
    this.active3 = false;
  }
  submit1() {
    this.active1 = true;
    this.active2 = false;
    this.active3 = false;
    console.log('1');
  }
  submit2() {
    this.active1 = true;
    this.active2 = true;
    this.active3 = false;
    console.log('2');
  }
  submit3() {
    this.active1 = true;
    this.active2 = true;
    this.active3 = true;
    console.log('3');
  }
}

Мой HTML:

    <mat-sidenav-container fullscreen>
  <mat-sidenav #sidenav  mode="side" class="example-sidenav" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true">
    <div class="logomain">Project progress</div>
    <mat-nav-list>
      <mat-list-item routerLink="1" [routerLinkActive]="[active1]" >
        <div fxFlex="10"></div>
        <div *ngIf="sidenavWidth > 6" class="sidenav-item">
          <h5 class="lead">Phase 1</h5>
        </div>
      </mat-list-item>

      <mat-list-item routerLink="2" [routerLinkActive]="[active2]">
        <div fxFlex="10"></div>
        <div *ngIf="sidenavWidth > 6" class="sidenav-item">
          <h5 class="lead">Phase 2</h5>
        </div>
      </mat-list-item>

      <mat-list-item routerLink="3" [routerLinkActive]="[active3]">
        <div fxFlex="10"></div>
        <div *ngIf="sidenavWidth > 6" class="sidenav-item">
          <h5 class="lead">Phase 3</h5>
        </div>
      </mat-list-item>
    </mat-nav-list>

  </mat-sidenav>

  <!-- <div class="example-sidenav-content">
    <router-outlet></router-outlet>
    
  </div> -->
  <br><br><br>
 <section>
  <br>
  <div class="example-button-row">
    <button mat-raised-button color="primary" (click) ="submit1()">Phase 1 completed</button>
   </div>
</section>
<mat-divider></mat-divider>
<br>
<section>
    <br>
    <div class="example-button-row">
      <button mat-raised-button color="primary" (click) = "submit2()">Phase 2 completed</button>
    </div>
</section>
<br>
.<section>
    <br>
    <div class="example-button-row">
      <button mat-raised-button color="primary" (click) = "submit3()">Phase 3 completed</button>
    </div>
</section>
<br>
</mat-sidenav-container>

Вот пример стека.

Мои вопросы. Когда я нажимаю кнопки, элемент боковой панели не становится серым по условию. Также я не уверен, как применить зеленый цвет к рабочей фазе.

Наконец, у меня есть много элементов вместо 3 элементов в примере. Я не хочу вручную устанавливать логические значения в событиях кликов.

Обновление:

Правильная редактируемая ссылка stackblitz https://stackblitz.com/edit/angular-material-with-angular-sidenav-etrylt