如何在使用md-sidenav和md-toolbar时使用右侧空置空间用于新组件？

Question

我在顶部和左边添加了一个md工具栏我添加了一个按钮，它将打开一个md-sidenav（从左到右）

但正因为如此，当我在整个组件下面添加另一个组件时，它不会使用空置的右侧区域。相反，它消耗了整个100％的高度，因此剩余的组件显示在整个页面的下方。

我尝试使用CSS文件，但是当我尝试将宽度减少到20％时，这是一团糟。我想使用这个精确的设计，但也使用正确的空白区域作为下一个组件。我该如何使用它？

navbar.component.html

<div>
  <md-toolbar color="primary">
    <button md-icon-button (click)="nav.open()">
            <md-icon>menu</md-icon>
          </button>

    <span>Repository Manager</span>

    <span><md-icon>verified_user</md-icon></span>
  </md-toolbar>
</div>

<md-sidenav-container #nav>
  <md-sidenav>
    <br>
    <button md-raised-button color="accent" class="sideButton">Home</button>
    <br><br>
    <button md-raised-button color="accent" class="sideButton">Search</button>
  </md-sidenav>

</md-sidenav-container>

styles.css的

body {
    margin: 0;
    font-family: Roboto, sans-serif;
  }

  md-card {
    max-width: 80%;
    margin: 2em auto;
    text-align: center;
  }

  md-toolbar-row {
    justify-content: space-between;
  }

  .done {
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: white;
  }

  md-sidenav {
    width: 10%;
    text-align: center;
    font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
  }

  html, body, material-app, md-sidenav-container, .my-content {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  .sideButton {
    width: 100%;
  }

Answer 1

只需在<md-sidenav>...</md-sidenav>之后但在<md-sidenav-container #nav>内声明下一个组件。示例from docs：

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </md-sidenav>

  <!-- Your component starts here -->
  <div class="example-sidenav-content">
    <button type="button" md-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</md-sidenav-container>

很高兴知道： 您可以通过单击右侧的按钮查看Angular Material文档中的代码示例：

这将节省大量时间。