如何将两个sidenav转换为有角材质

Question

我尝试在 Angular Material 中实现两个sidenav，这是我的屏幕截图：

这是我的代码：

html

<mat-sidenav-container class="example-sidenav-container">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" class="customSideNav" opened>

        <!--
        method: Menu Dinamic
        description: create the dinamic menu based on api rest
        params: none
        response: BusinessUnit array
        -->
        <mat-selection-list [multiple]="false">
        <mat-list-option style="border-top-left-radius: 100px; border-bottom-left-radius: 100px;">
            <mat-icon mat-list-icon>search</mat-icon>
            <div [@animateText]="linkText ? 'show' : 'hide'">
                <div mat-line>{{'sidenav.icon.search' | translate}}</div>
            </div>
        </mat-list-option>

        <mat-list-option (click)="openMenu(bu.id)"
            *ngFor="let bu of modules"
            style="border-top-left-radius: 100px; border-bottom-left-radius: 100px;">
            <mat-icon mat-list-icon svgIcon="{{ bu.iconName }}"></mat-icon>
            <div [@animateText]="linkText ? 'show' : 'hide'" style="margin-left: 10px">
                <div mat-line>{{ bu.name }}</div>
            </div>
        </mat-list-option>
        </mat-selection-list>

        <span class="spacer"></span>
        <div fxLayout="row" fxLayoutAlign="end center" style="padding: 0px 10px;">
        <button (click)="onSinenavToggle()" mat-icon-button>
            <mat-icon *ngIf="sideNavState">visibility_off</mat-icon>
            <mat-icon *ngIf="!sideNavState">visibility</mat-icon>
        </button>
        </div>

    </mat-sidenav>

   <!-- LOAD CONTENT -->
    <mat-sidenav-content>enter link description here
        <mat-sidenav-container class="example-container">
            <mat-sidenav #subNav [(opened)]="subMenuOpened" class="customSideNavInner" 
                [ngClass]="(onSideNavChange == true )?'subMenuInnerSpace':''">
                <mat-selection-list [multiple]="false">
                    <mat-list-option (click)="gotoLink(operation.url)"
                        *ngFor="let operation of selectedModule.operations"
                        style="border-top-left-radius: 100px; border-bottom-left-radius: 100px;">
                        <mat-icon mat-list-icon svgIcon="{{ operation.iconName }}"></mat-icon>
                        <div style="margin-left: 10px">
                            <div mat-line>{{ operation.name }}</div>
                            <div mat-line>{{ operation.description }}</div>
                        </div>
                    </mat-list-option>
                </mat-selection-list>
            </mat-sidenav>
            <mat-sidenav-content mode="side">  
                <mat-sidenav-container class="example-container">
                    <mat-sidenav-content>
                        <ng-content></ng-content>
                    </mat-sidenav-content>
                </mat-sidenav-container>
            </mat-sidenav-content>
        </mat-sidenav-container>
    </mat-sidenav-content>

请提出一些创造这种效果的建议，我不知道该如何制作这2个卫星导航。

这是我创建倍数sidenav的参考，但仅显示html标签。

reference