CODEWITHSUNDEEP
htmlangularjsmaterial-design
Igino Boffa
Igino Boffa

Reputation: 451

ngMaterial nested sidebar

I would like to replace the current sidebar by clicking one of the button in the sidebar, but this is not working.

As you can see in the attached codepen, you should be able to show another sidebar by clicking on "SETTINGS" button.

Here is the codepen link:

https://codepen.io/anon/pen/apXGPP

Here is the HTML code:

    <div flex layout="column" ng-controller="viewController">
    <md-actions layout="row">
        <md-button class="md-raised mbp-button-def" ng-click="toggleSidenav('menu')">Menu</md-button>
            <md-sidenav class="md-sidenav-left" md-component-id="menu">
<md-list flex>
    <md-list-item class="md-menu-header"><h1>Menu</h1></md-list-item>
      <md-list-item ><md-button class="menu-button" ><md-icon class="small-icon"
                md-svg-icon="img/icons/about.svg"></md-icon>About...</md-button></md-list-item>
    <md-list-item ><md-button class="menu-button">Activity</md-button></md-list-item>
    <md-list-item ><md-button class="menu-button">Print</md-button></md-list-item>
    <md-list-item ><md-button class="menu-button">Help</md-button></md-list-item>
    <md-list-item ><md-button class="menu-button">Contact Us</md-button></md-list-item>
    <md-divider></md-divider>
    <md-list-item ><md-button class="menu-button"><md-icon class="small-icon"
                md-svg-icon="img/icons/settings.svg" ng-click="toggleSidenav('settings')"></md-icon>Settings<md-icon class="small-icon right-arrow"
                md-svg-icon="img/icons/arrow.svg"></md-button></md-list-item>
    <md-list-item ><md-button class="menu-button" ><md-icon class="small-icon"
                md-svg-icon="img/icons/logout.svg"></md-icon>Logout</md-button></md-list-item>          
</md-list>

    </md-sidenav>
     <md-sidenav class="md-sidenav-left" md-component-id="settings">
<md-list flex>
    <md-list-item class="md-menu-header"><h1>Settings</h1></md-list-item>
      <md-list-item ><md-button class="menu-button" ><md-icon class="small-icon"
                md-svg-icon="img/icons/trading.svg"></md-icon>Trading</md-button></md-list-item>
    <md-list-item ><md-button class="menu-button">Alerts</md-button></md-list-item>
    <md-list-item ><md-button class="menu-button">Display</md-button></md-list-item>

    <md-divider></md-divider>

    <md-list-item ><md-button class="menu-button" ><md-icon class="small-icon"
                md-svg-icon="img/icons/back.svg"></md-icon>Back</md-button></md-list-item>          
</md-list>

    </md-sidenav>
</div>

Here is the controller:

    var mbp= angular.module("mbp");

mbp.controller("viewController", function($scope,$mdSidenav){
     $scope.currentView = 'mbp';

     $scope.setView = function (view){
         $scope.currentView = view;
     }

     $scope.toggleSidenav = function(sidenavId){
         $mdSidenav(sidenavId).toggle();
     }
})

How can I achieve this?

Regards

Upvotes: 0

Views: 400

Answers (1)

Nilson G Silva
Nilson G Silva

Reputation: 26

I´ve noticed you placed your ng-click="toggleSidenav('settings')" inside the icon element. It seems that this kind of element does not support this setting.
If you move your ng-click="toggleSidenav('settings')" to the outter md-button it seems to work as you want.

Peace Out

Upvotes: 1

Related Questions