title: resize bar for sidenav in angular material design.
body: <p>Is there a directive in angular material to resize sidenav? </p>
  
  <p>There is a sidenav which shows list of clients and the right pane has the details of the client. I am trying to add a resize bar between them.</p>
  
  <p>I used the following </p>
  
  <p><a href="http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/Zi2f0EPxmtEUmdoFR63B?p=preview</a></p>
  
  <p>which i found in the following</p>
  
  <p><a href="https://stackoverflow.com/questions/18368485/angular-js-resizable-div-directive">Angular JS resizable div directive</a>  </p>
  
  <p>I tried following the above plunker example but the sidenav never resized. The right pane moves right but the left pane remain unchanged.</p>
  
  <pre><code>&lt;div layout="row" flex&gt;
  
          &lt;md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" id="sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')"&gt;
              &lt;md-list class="sideBar"&gt;
                  &lt;md-item ng-repeat="client in data"&gt;
                      &lt;md-item-content&gt;
                          &lt;md-button ng-click="selectClient(client);" &gt;
  
                                  {{client.name}} 
                          &lt;/md-button&gt;
                      &lt;/md-item-content&gt;
                  &lt;/md-item&gt;
              &lt;/md-list&gt;
          &lt;/md-sidenav&gt;
  
          &lt;div id="sidebar-resizer" 
          resizer="vertical" 
          resizer-width="6" 
          resizer-left="#sidenav" 
          resizer-right="#primary-col"
          resizer-max="400"&gt;
      &lt;/div&gt;
      &lt;!-- viewport column --&gt;
  
      &lt;div layout="column" flex class="content-wrapper" id="primary-col"&gt;
          &lt;div id="viewPort" ng-view&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt; 
  </code></pre>
  
  <p>Thank you</p>