Angular Material Design：使用顶部导航栏和左侧导航栏构建模板

Question

Hi i want build a simple template using Angular Material 2:

this is the code

<md-toolbar>
    <button><md-icon>menu</md-icon></button>
    <h1>Angular</h1>
</md-toolbar>

<md-sidenav-container>

  <md-sidenav>
  <nav>
    <ul>
      <li><a routerLink="/Foo" routerLinkActive="active">Foo</a></li>
      <li><a routerLink="/Bar" routerLinkActive="active">Bar</a></li>
      <li><a routerLink="/Baz" routerLinkActive="active">Bar</a></li>
    </ul>
  </nav>
  </md-sidenav>

  <router-outlet></router-outlet>

  <footer></footer>

</md-sidenav-container>

i have a bit of problem:

1. the sidenav cover the router-outlet
2. the router-outlet isn't 100% height

it's possible achieve this template only using material components (without css hack)?

Answer 1

Here's a close sample of your template. I just added color to easily distinguish them.

<md-toolbar color="accent">
    <button (click)="sidenav.toggle()">
      <md-icon>menu</md-icon>
    </button>
    <h1>Angular</h1>
</md-toolbar>

<md-sidenav-container style="height: 91vh;background: yellow">

  <md-sidenav #sidenav mode="side" style="background: orange">
    Sidenav!
  </md-sidenav>

  <md-tab-group>
    <md-tab label="Tab 1">Content 1</md-tab>
    <md-tab label="Tab 2">Content 2</md-tab>
 </md-tab-group>

</md-sidenav-container>

<footer style="background: skyblue">This is footer</footer>

demo

Hope this helps!