Angular Material Design collapsible sidenav

Question

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,

and on mouse over expands to this

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.

EDIT

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

Answer 1

I am Completed the AngularJS Sidenav as the Above Image... And the Codes are Given Below...

index.html:

    <div ng-controller="mainCtrl">

    <md-toolbar layout="column" ><span flex="flex">
        <div class="md-toolbar-tools">

      </div>

    </md-toolbar>

     <md-content>
    <div layout="row" >

    <div ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()" >
        <md-sidenav  style="position: fixed;" layout="column" ng-class="myClass " md-component-id="small" md-is-locked-open=true >
          <md-toolbar md-whiteframe="3" >
        <div class="md-toolbar-tools">
         <img src="https://www.atlanticaviation.com/docs/default-source/logos-library/atlantic-logo-4c-a2.png?sfvrsn=12" height="30" width="40" />
       &nbsp;

          </div>
          </md-toolbar>
      </md-sidenav>
      <md-sidenav  flex layout="column" class="rightnav md-whiteframe-z2" ng-show="hoverEdit" md-component-id="big" style="position: fixed;" ng-hide=true md-is-locked-open=true>
      <md-toolbar md-whiteframe="3">
        <div class="md-toolbar-tools">

     <img src="https://www.atlanticaviation.com/docs/default-source/logos-library/atlantic-logo-4c-a2.png?sfvrsn=12" height="30" width="50" />
       &nbsp;
          <h5 style="color: #fff;">ARAVINTHAN MENU</h5>
          <md-button ng-click="toggleClass()" class="cmn-toggle-switch cmn-toggle-switch__htra ">
        Toggle
      </button>
          </div>
               </md-toolbar>
      </md-sidenav>
       </div>
         <md-content flex>

      </md-content>
    </div>
     </md-content>
</div>

Style.css :

/*CSS Styles for the Sidenav Bar */
.rightnav
{
    min-width: 200px !important;
    width: 280px !important;
    max-width: 700px !important;
    height: 100%;
    position: fixed;

    box-sizing: border-box;
    z-index: 60;
    bottom: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

}

.md-sidenav-opened 
{
   min-width: 200px !important;
   width: 280px !important;
   max-width: 700px !important;
   border: 1px solid #ddd;
}

.md-sidenav-left
{
   min-width: 55px !important;
   width: 55px !important;
   max-width: 700px !important;
   overflow-x:hidden;
}

App.js

//JS Code for Side Nav here
angular.module('anApp', ['ngMaterial'])
        .controller('mainCtrl',['$scope', '$mdSidenav', function($scope,$mdSidenav)
            {
 $scope.myClass = "md-sidenav-left md-whiteframe-z2";
 $scope.option1 = "md-sidenav-opened md-whiteframe-z2";

        $scope.toggleFlag= true;

    $scope.edit = true;
 $scope.hoverEdit = false;
 $scope.size = "5";


    $scope.toggleClass = function() {
    if( $scope.myClass == "md-sidenav-left md-whiteframe-z2" )

        {
            $scope.myClass = "md-sidenav-opened md-whiteframe-z2";
            $scope.toggleFlag = false;
            $scope.size = "25";
        }
    else 
        {
            $scope.myClass = "md-sidenav-left md-whiteframe-z2";
            $scope.toggleFlag = true;
            $scope.size = "5";

        }
    }



           $scope.toggleSidenav = function(menuId) {
              $scope.hoverEdit = true;

           };

          $scope.hoverIn = function(){
              if($scope.toggleFlag)
              {
                  $scope.hoverEdit = true;
                $scope.edit = false;
              }


          };

          $scope.hoverOut = function(){
            if($scope.toggleFlag)
              {
                  $scope.hoverEdit = false;
                    $scope.edit = true;
              }
          };

          }]);

The Codepen Example - Codepen