如何实现Angular官网的效果？

Question

如何实现Angular官网的效果？

题目来源及自己的思路

我想实现官网的效果，点击左上角的菜单按钮左侧侧边栏就收起，再次点击就出现，且铺满屏幕。
于是用到了Angular Material的<mat-toolbar>和<mat-sidenav-container>
mat-toolbar我设置了纵深，但是接上mat-sidenav-container纵深的效果就消失了，如果吧mat-sidenav-container换成div就可以正常显示。而且sidenav-container并没有占满整个屏幕，我需要在CSS上修改什么吗？
目前css还没写内容。下面是我运行的效果图：

相关代码

index.component.html

<mat-toolbar [class.mat-elevation-z24]="isActive" color="primary" class="lite-toolbar">
  <button mat-mini-fab color="primary" [class.mat-elevation-z0]="isActive" (click)="changeSideNav()"  class="lite-head-button">
    <mat-icon>menu</mat-icon>
  </button>
  <span>Lite Tools</span>
</mat-toolbar>
<mat-sidenav-container>
  <mat-sidenav [mode]="mode.value" [opened]="isOpen">
    <div>side</div>
    <div>side</div>
    <div>side</div>
    <div>side</div>
    <div>side</div>

  </mat-sidenav>
  <mat-sidenav-content>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>

  </mat-sidenav-content>
</mat-sidenav-container>

index.component.less

  .lite-toolbar{
    z-index: -1;
    .lite-head-button{
      margin-right: 1vw;
    }
  }

index.component.ts

import { Component, OnInit } from '@angular/core';
import {FormControl} from "@angular/forms";

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.less']
})
export class IndexComponent implements OnInit {

  isActive: boolean = true;
  isOpen:boolean = false;

  mode = new FormControl('push');
  constructor() { }

  ngOnInit(): void {
  }

  changeSideNav(){
    this.isOpen = !this.isOpen;
  }

}

app.component.html

<app-index></app-index>

app.component.ts

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'lite-frontend';
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from "@angular/material/toolbar";
import {MatIconModule} from "@angular/material/icon";
import { MatSidenavModule } from "@angular/material/sidenav";
import {MatButtonToggleModule} from "@angular/material/button-toggle";
import {MatButtonModule} from "@angular/material/button";
import { IndexComponent } from './index/index.component';

@NgModule({
  declarations: [
    AppComponent,
    IndexComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatButtonToggleModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

你期待的结果是什么？实际看到的错误信息又是什么？

期望能实现Angular官网的效果

Answer 1

这应该是z-index的原因，试一下提高mat-toolbar的z-index

https://stackblitz.com/edit/a...

Answer 2

建议把代码贴在https://codesandbox.io/上。这样大家好帮助复现及修复问题