Sidenav перекрывает содержимое страницы в угловых

Question

sidenav перекрывает содержимое страницы, а не перемещает содержимое страницы вправо:

компонент боковой навигации: app-mat-menu

<mat-sidenav id="sidenav" #mainsidenav mode="side" opened>

        <div routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item">
            <a class="nav-link" [routerLink]="[menuItem.path]">
                <i class="material-icons">{{menuItem.icon}}</i>
                <a>{{menuItem.title}}</a>
            </a>
        </div>
        <div *ngFor="let serviceItem of serviceItems" class="nav-item">
            <a class="nav-link" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="material-icons">{{serviceItem.icon}}</i>
                <a>{{serviceItem.title}}</a>
            </a>   
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <!--<li routerLinkActive="active" *ngFor="let item of serviceItem.submenu" class="nav nav-item dropdown-menu dropdown-item" aria-labelledby="navbarDropdownMenuLink">-->
                       <a *ngFor="let item of serviceItem.submenu" class="dropdown-item nav-link" [routerLink]="[item.path]">
                           <p>{{item.title}}</p>
                       </a>
                <!--</li>-->
            </div>     


        </div>


</mat-sidenav>
<mat-toolbar id="toolbar">
        <mat-toolbar-row id=toolbar1 fxLayout="row" fxLayoutAlign="center">
            <a> Welcome to Shared Services</a>
            <span class="fill-space"></span>

            <a  id="user" class="dropdown">
              <div dropdownToggle class="dropdown-toggle nav-link" data-toggle="dropdown">
                    <mat-icon>person</mat-icon>
              </div>
              <div dropdownMenu class="dropdown-menu">
                  <li><span  id="greeting">Hi! Manoj</span></li>
                  <li><a>Another Action</a></li>
                  <li [routerLink]="['/login']" name="logout" value="Log Out"><a id="logout">Log Out</a></li>
              </div>
            </a>

        </mat-toolbar-row>
        <mat-toolbar-row id=toolbar2 fxLayout="row" fxLayoutAlign="center">    
            <span><a><mat-icon (click)="mainsidenav.toggle()"> menu </mat-icon></a></span>
            <span class="fill-space"></span>
            <span><a class="nav-link" routerLink="/services"> Service Catalog </a></span>
            <span><a class="nav-link" routerLink="/dashboard"> Account </a></span>
            <span><a class="nav-link" routerLink="/dashboard"> Support </a></span>
        </mat-toolbar-row>

</mat-toolbar>

Ниже приведен основной app.component.html:

<div class="wrapper">
<mat-sidenav-container>

        <div>
            <app-mat-menu></app-mat-menu>            
            <router-outlet></router-outlet>
            <app-footer></app-footer>
        </div>
</mat-sidenav-container>
</div>

Я не предоставил никакого пользовательского свойства CSS, связанного с высотой и шириной страницы.

Answer 1

В дополнение к sidenav вам необходимо использовать компоненты контейнера sidenav и контент sidenav.Структура должна выглядеть так:

<mat-sidenav-container>

  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>

  <mat-sidenav-content>Main content</mat-sidenav-content>

</mat-sidenav-container>