Javascript 如何在带有角度的页面中添加双面导航？

我正在创建一个带有角度的页面，使用角度材质，我必须在其中放置两个侧导航，一个在左侧显示一些用户数据，另一个在右侧显示选项菜单，这是到目前为止我拥有的图像：

白色框的部分是用户数据的显示位置，右侧是我希望看到选项菜单的位置，即红色框，尽管我已经添加了双面导航，但问题是我看不到右侧的，按下按钮时，它会向左扩展，如本例所示：

虽然在本例中，选项菜单从左侧处理，但下面是我正在处理的代码：

home.component.html

<mat-sidenav-container fullscreen>
<mat-sidenav mode="side" #sidenav opened position="start">
    <mat-toolbar color="primary" class="mat-elevation-z4">

    </mat-toolbar>

</mat-sidenav>
<mat-sidenav-content style="z-index: unset;overflow: hidden;">
    <mat-toolbar>
        <button mat-icon-button (click)="sidenav.toggle()">
            <mat-icon>menu</mat-icon>
        </button>
        <span class="toolbar-spacer"></span>
        <label class="label">2719872</label>
        <mat-icon class="menu" (click)="isExpanded = !isExpanded">menu</mat-icon>
    </mat-toolbar>
    <mat-sidenav-container class="example-sidenav-container" autosize>
        <mat-sidenav #sidenav2 position="end" class="example-sidenav" mode="side" opened="true">
            <mat-nav-list class="dashboard">
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>description</mat-icon>
                    <p matLine *ngIf="isExpanded">Documentación</p>
                </a>
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>video_label</mat-icon>
                    <p matLine *ngIf="isExpanded">Tutoriales</p>
                </a>
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>contact_support</mat-icon>
                    <p matLine *ngIf="isExpanded">Contáctenos</p>
                </a>
                <a mat-list-item (click)="toggleActive($event)">
                    <mat-icon mat-list-icon>logout</mat-icon>
                    <p matLine *ngIf="isExpanded">Salir</p>
                </a>
            </mat-nav-list>
        </mat-sidenav>
    </mat-sidenav-container>
    <div class="main-content">
        <p>
            Hi
        </p>
    </div>
    <router-outlet></router-outlet>
</mat-sidenav-content>

菜单
2719872
菜单
描述
文件

视频标签
教程

联系您的技术支持
Contáctenos
注销
Salir

你好

中的结构不正确。您应该有一个

容器

，然后使用

位置

属性将它们对齐

<mat-sidenav-container class="example-container">
  <mat-sidenav opened mode="side" opened="true">Start content</mat-sidenav>
  <mat-sidenav opened mode="side" position="end" opened="true">End content</mat-sidenav>
   Main content
</mat-sidenav-container>

开始内容
最终内容
主要内容

---

当我在第页有两个工具栏时，这是可能的？是的，检查链接你能把链接放在这里吗？它对我不起作用链接对我不起作用