如何使用Angular和材质设计来设计响应式着陆页（主页）？

Question

我希望我的主页符合以下要求：    1.固定标头，其中包含汉堡图标，左侧徽标和“登录”徽标。      右边。    2.粘贴页脚。    3.单击汉堡包图标时，在页面上应该可以看到Sidenav。    4.登录表单应该在Sidenav内容区域的右侧。

 <mat-drawer-container class="container" autosize>
     <mat-drawer #drawer class="sidenav">
        <button mat-button>Link One</button>
        <button mat-button>Link Two</button>
        <button mat-button>Link Three</button>
     </mat-drawer>
     <div class="sidenav-content">
        <mat-toolbar color="primary" class="fixed-header">
            <mat-toolbar-row>
                  <button mat-icon-button (click)="drawer.toggle()">
                      <mat-icon>menu</mat-icon>
                  </button>
                  <span class="title"> {{ title }}</span>
                  <span class="toolbar-spacer"></span>
             </mat-toolbar-row>
        </mat-toolbar>
        <router-outlet></router-outlet>
     </div>
 </mat-drawer-container> 

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
 html {
     height: 100%;
 }
 body {
     margin: 0;
     font-family: Roboto, sans-serif;
 }
 .toolbar-spacer {
      flex: 1 1 auto;
 }
 .container {
      position: absolute;
      margin-top: 0px;
      height: 100%;
 }
 .container .mat-drawer {
     min-width: 200px;
 }
 .container .mat-drawer .mat-button {
      display: block;
      width: 100%;
      text-align: left;
 }

我希望当前代码的输出为屏幕的整个宽度，但是像丝带一样可见。