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 o

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

.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