Как использовать p-уровневое меню в мат-сиденав контенте с роутером-розеткой?

Question

Мы использовали p-многоуровневое меню для отображения подменю в mat-sidenav, и мы поместили внутри

p-многоуровневое меню не отображается правильно в mat-sidenav, как показано на скриншоте ниже:

Вот скриншот:

Оно должно отображать подменю (PQR, LMN) вне контекста mat-sidenav, т.е. внутри розетки маршрутизатора.

<mat-sidenav-container>
  <mat-sidenav #projectnav
    mode="side"
   opened>
    <mat-nav-list>      
      <div *ngFor="let menuItem of menuArray" >
        {{ menuItem.visible }}                     
        <app-tiered-menu *ngIf="menuOpen" [menuItems]="[menuItem]">
        </app-tiered-menu>      
      </div>
    </mat-nav-list>
  </mat-sidenav>
 <mat-card-content>
    <router-outlet></router-outlet>
  </mat-card-content>
</mat-sidenav-container>