ヘッダーの下にある角度のある素材sidenav

Question

角度のある素材sidenavを使用しようとしています。すべて期待どおりに動作しますが、sidenavはヘッダーを滑っています。どうすれば修正できますか？私はコードを見ることができるようにプランカーを作ったが、プランカーは期待通りに動かなかった。事前にお手伝いいただきありがとうございます。

このhttps://plnkr.co/edit/gr5n1AbBHADWY4L72MMg?p=previewは、残りの部分は

<div> 
    <md-toolbar class="md-accent"> 
      <div class="md-toolbar-tools"> 
       <h2>Logo here</h2> 
      </div> 
    </md-toolbar> 
    </div> 
    <div ng-controller="AdminController as ctrl" class="md-content" ng-cloak> 
     <section layout="row" flex> 
      <md-sidenav class="md-sidenav-left" md-component-id="left" 
          md-disable-backdrop md-whiteframe="4"> 
      <md-content layout-margin> 
       <md-button ng-click="toggleLeft()" class="md-accent"> 
        Close this Sidenav 
       </md-button> 
      </md-content> 
       </md-sidenav> 
       <md-content flex layout-padding> 
        <div layout="column"> 
         <div> 
          <md-button ng-click="toggleLeft()" class="md-raised"> 
           Toggle Sidenav 
          </md-button> 
         </div> 
        </div> 
       </md-content> 
      </section> 
     </div> 

Answer 1

場所MD-ボタンPlunkerで見ることができ、私のコードの一部である外

<section layout="row" flex> 
    <md-content flex layout-padding> 
     <md-toolbar class="md-theme-indigo"> 
     <h2>Logo here</h2> 
     </md-toolbar> 
     <md-button ng-click="clickSide('left')"> Toggle Sidenav</md-button> 
    </md-content> 
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left"> 
     <md-toolbar class="md-theme-light"> 
     <h1 class="md-toolbar-tools">Sidenav left</h1> 
     </md-toolbar> 
     <md-content layout-padding=""> 
     <md-tabs> 
     </md-tabs> 
     </md-content> 
    </md-sidenav> 
    </section> 

EDIT： 埋め込みSideNavとコンテンツでa <md-content flex></md-content>

DEMO