title: Angular Material Design collapsible sidenav
body: <p>I am trying to implement angular material designs sidenav and I've got it to work correctly but I wanted to create a sidenav as shown below,</p>
  
  <p><a href="https://i.stack.imgur.com/rtax9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rtax9.png" alt="enter image description here"></a></p>
  
  <p>and on mouse over expands to this</p>
  
  <p><a href="https://i.stack.imgur.com/f5mgX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/f5mgX.png" alt="enter image description here"></a></p>
  
  <p>I tried using two sidenav bars and on mouseover show one and hide the other but that din't work as expected.Would be glad if you could help me out here.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;div layout="row" flex&gt;
  
    &lt;md-sidenav  layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="small" md-is-locked-open="$mdMedia('gt-sm')" ng-mouseover="hoverIn()" ng-mouseout="hoverOut()"&gt;
    &lt;/md-sidenav&gt;
  
    &lt;md-sidenav  flex layout="column" class="rightnav md-whiteframe-z2" ng-show="hoverEdit" md-component-id="big" md-is-locked-open="$mdMedia('gt-sm')"&gt;
    &lt;/md-sidenav&gt;
  
    &lt;div layout="column" flex id="content"&gt;
       &lt;md-content layout="column" flex class="md-padding"&gt;
       &lt;/md-content&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope,$mdSidenav){
  
     $scope.edit = true;
     $scope.hoverEdit = false;
     $scope.toggleSidenav = function(menuId) {
        $scope.hoverEdit = true;
        $mdSidenav(menuId).toggle();
     };
  
    $scope.hoverIn = function(){
      $scope.hoverEdit = true;
      $scope.edit = false;
  
    };
  
    $scope.hoverOut = function(){
      $scope.hoverEdit = false;
      $scope.edit = true;
    };
  
    }]);
  </code></pre>
  
  <p><strong>main.css</strong></p>
  
  <pre><code>md-sidenav.md-locked-open.rightnav,
  md-sidenav.md-locked-open-remove.md-closed.rightnav,
  md-sidenav.md-locked-open.md-closed.rightnav,
  md-sidenav.md-locked-open.md-closed.rightnav 
  {
     min-width: 200px !important;
     width: auto !important;
     max-width: 700px !important;
     background-color: #10123B;
     border-left: 2px solid #38ddcc;
     height : 100%;
     position: absolute;
  }
  
  md-sidenav.md-locked-open, 
  md-sidenav.md-locked-open-remove.md-closed, 
  md-sidenav.md-locked-open.md-closed, 
  md-sidenav.md-locked-open.md-closed.md-sidenav-left
  {
     min-width: 50px !important;
     width: auto !important;
     max-width: 700px !important;
     background-color: #10123B;
     border-left: 2px solid #38ddcc;
     height : 100%;
     position: absolute;
  }
  </code></pre>