CODEWITHSUNDEEP
cssangularjsangular-material
Udara Herath
Udara Herath

Reputation: 885

Angular material fixed side-nav

I have made a side-nav bar like below

enter image description here

I want to hide the text and when click on menu button on the toolbar. Like this

enter image description here

Here is my HTML code

<body  ng-controller="dashCtrl" class="text-center " >


 <md-toolbar class="md-hue-2">
  <div class="md-toolbar-tools" >
      <md-button class="md-icon-button" ng-click="toggleLeft()" >
            <img src="img/icon/menu.svg" />

      </md-button>

      </div>
</md-toolbar>


<md-content flex style="height:100%"> 
<md-sidenav style="width: 200px;" md-component-id="left"  class="md-sidenav-left md-whiteframe-z1 " layout="column" md-disable-backdrop >
    <md-content>
    <md-list>

        <md-list-item md-ink-ripple >
            <i class="material-icons">apps</i><div style="margin-left:15px">Dashboard</div>

        </md-list-item >
        <hr style="width: 95%;border-bottom: 0.2px think #f2f2f2;margin-top:0px;margin-bottom:0px">

        <md-list-item md-ink-ripple>
           <i class="material-icons">domain</i><div style="margin-left:15px">Hotels</div>

            </md-list-item >
        <hr style="width: 95%;border-bottom: 0.5px think #f2f2f2;margin-top:0px;margin-bottom:0px">

    </md-list>
        </md-content>
</md-sidenav>

<md-content >
<div layout="column" flex id="content">
        <md-content layout="column" flex class="md-padding">
           <md-whiteframe class="md-whiteframe-1dp" flex-sm="45" flex-gt-sm="35" flex-gt-md="25" layout layout-align="center center">
<span>Dashboard</span>
</md-whiteframe>

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

Here is my js file

angular
.module('dashApp',['ngMaterial'])
.controller('dashCtrl',dashApp);

function dashApp($scope,$mdSidenav){

$scope.toggleLeft = buildToggler('left');
$scope.toggleRight = buildToggler('right');

function buildToggler(componentId) {
  return function() {
    $mdSidenav(componentId).toggle();
  }
}
}

I tried to find a solution on the internet to do this, but I'm unable to find it. Is it possible to do this with Angular or not?

Any help highly appreciate.

Upvotes: 3

Views: 10317

Answers (2)

ericdemo07
ericdemo07

Reputation: 481

Here is an shorter approach,

<md-sidenav>
 <md-content>
  Buttons
  <div *ngIf="is_open">
   texts
  </div>  
 </md-content>
</md-sidenav>

Upvotes: 0

Gustavo Gabriel
Gustavo Gabriel

Reputation: 1296

Like @isherwood said there is not option built in to do what you want, I've done something like this in the past with a simple ng-show and ng-hide with some custom classes. Its not that hard:

<md-sidenav>
   <md-content>

      <div ng-show="is_open">
          Buttons with texts....
      </div>

      <div ng-hide="is_open">
          Buttons with icons....
      </div>

   </md-content>
</md-sidenav>

Hope it helps =)

Upvotes: 2

Related Questions