Angular: close ng-sidenav after a click on a element

Question

Using angular & material, I have a sidenav on the left used to provide user's function (login, signup...).

Working fine, but I want the bar to be closed automatically once the user clicks on a menu. Currently, the bar stays open.

The sidebar code:

<md-sidenav md-component-id="user_sidenav" class="md-sidenav-left" flex>
    <md-menu-content flex>
        <md-menu-item>
            <md-button ui-sref="app.user-state()">
                <span>
                  User
                </span>
            </md-button>
        </md-menu-item>
        <md-menu-item>
            <md-button ui-sref="vlg.user-other-state()">
                <span>
                  Other
                </span>
            </md-button>
        </md-menu-item>
...

Any idea?

Answer 1

What I have done is create a function in the controller for closing the sidenav and then on clicking of an element calling the function.

app.controller('AppController', ['$scope', '$mdSidenav',
    function ($scope, $mdSidenav) {

        $scope.close = function () {
            $mdSidenav('left').close();

        };

}]);

and then in html

<div ng-controller="AppController">
   <!-- Add in code for sidenav-->
     <md-button ng-href="#/path" ng-click="close()"></md-button>
</div>

You could also just add the below code to a function if your elements already have a ng-click attached.

.then(function () {
      $mdSidenav('left').close();
});