Material Design Sidebar

Right Sidebar

assers/backend/angular/controllers/DashbaordController.js

window.angularApp.controller("DashboardController", [
    "$scope",
    "API_URL",
    "window",
    "jQuery",
    "$http",
    "$mdSidenav", "$sce",
    function($scope,
        API_URL,
        window,
        $,
        $http,
        $mdSidenav, $sce
    ) {
        "use strict";

        //...

        // Check for update
        $scope.toggleRight = buildToggler('right');
        function buildToggler(navID) {
          return function() {
            // Component lookup should always be available since we are not using `ng-if`
            $mdSidenav(navID)
              .toggle()
              .then(function () {

                $rootScope.rightSidebarHeadingTitle = 'Sidebar';
                $scope.rawRightSidenavHtml = $sce.trustAsHtml('<p>Right Sidebar Content</p>');

              });
          };
        }
    }
]);

footer.php

<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
  <md-toolbar class="md-theme-light">
    <h1 class="md-toolbar-tools"><?php echo trans('text_sidebar');?></h1>
  </md-toolbar>
  <md-content ng-controller="RightCtrl" layout-padding>
    <div bind-html-compile="rawRightSidenavHtml"><span class="modal-loader"><?php echo trans('text_loading');?></span></div>

    <md-button ng-click="close()" class="md-primary btn btn-secondary">
      <?php echo trans('button_close');?>
    </md-button>
  </md-content>
</md-sidenav>
</body>
</html>

Trigger from header.php

<li class="nav-item"><a ng-click="toggleRight()" href="#" class="nav-link">Update</a></li>