Angular mat-list-item routerLink not working

I am not getting why the routing doesn't work. Any help please...

1. When I click on "Terminal 1/2/3" (please check the below picture) it doesn't show the Terminal page

2. When 'AF' is collapse, there is a big gap between AF and Dashboard in menu

Code: github.com/sid-ca/Configurator

https://stackblitz.com/edit/github-1b3qtp-vhyry6

Stackblitz: https://stackblitz.com/github/sid-ca/Configurator

app.module.ts

import { AppRoutingModule } from './app-routing.module';
imports: [
    BrowserModule,
    MatModule,
    AppRoutingModule,

index.html

<base href="/">
<app-root></app-root>

app.component.html

<app-header></app-header>

<mat-sidenav-container>
  <mat-sidenav mode="side" opened="true" style="min-width:60px; background: #F3F3F3;" autosize fixedTopGap="56">
    <app-sidebar></app-sidebar>
  </mat-sidenav>

  <mat-sidenav-content [@onSideNavChange]="sidebarState">
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TerminalComponent } from './af/terminal/terminal.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'terminal', component: TerminalComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

sidebar.component.html

<div class="sidebar_menu" [@onSideNavChange]="sidebarState">
  <mat-nav-list class="menu-list">
    <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent" routerLinkActive="active-list-item" routerLink="login" title="af">
      <mat-icon class="icon menu-icon" style="font-size: 1em !important;" [@iconAnimation]="sidebarState">input</mat-icon>
      <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
      <span class="label" [@labelAnimation]="sidebarState">AF</span>
    </mat-list-item>
    <div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
        <a mat-list-item [routerLink]="'terminal'">Terminal 1</a>
        <a mat-list-item routerLink="terminal" routerLinkActive="active">Terminal 2</a>
        <a  routerLink="terminal"> <mat-list-item> Terminal 3 </mat-list-item></a>

terminal.component.html

<div class="main_container" style=" height:100vh;">
    <p>terminal works!</p>
</div>

from Angular mat-list-item routerLink not working