角材料设计可折叠边导航

Question

我正在尝试实现有角度的材料设计sidenav，并且我可以正常工作，但是我想创建一个sidenav，如下所示，

鼠标悬停在此

我尝试使用两个sidenav栏，并在鼠标悬停时显示一个，然后隐藏另一个，但这并没有按预期工作。如果您能在这里帮助我，将非常高兴。

编辑

index.html

<div layout="row" flex>

  <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()">
  </md-sidenav>

  <md-sidenav  flex layout="column" class="rightnav md-whiteframe-z2" ng-show="hoverEdit" md-component-id="big" md-is-locked-open="$mdMedia('gt-sm')">
  </md-sidenav>

  <div layout="column" flex id="content">
     <md-content layout="column" flex class="md-padding">
     </md-content>
  </div>

</div>

app.js

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;
  };

  }]);

main.css

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;
}