javascript - Angular-material how to build a sidenav menu that control a md-content? -

i'm developing mobile based on angularjs , angular-material i'm bit confused on how set menu.

here's semplified situation:

inside of body have md-sidenav , md-content, inside of md-sidenav there md-menu-buttons.

question: how can implement md-menu-buttons clicking them, different content shown in md-content.

for example when click, 'home' div home's stuff appears , on?

here's simple example - codepen

markup

<div ng-controller="appctrl" layout="column" style="height:500px;" ng-cloak="" class="sidenavdemobasicusage" ng-app="myapp">   <section layout="row" flex="">     <md-sidenav class="md-sidenav-left" md-component-id="left" md-whiteframe="4" id="leftsidenav" md-disable-backdrop="true">       <md-toolbar class="md-theme-indigo" layout="row">         <h1 class="md-toolbar-tools">sidenav left</h1>         <span flex></span>         <md-button ng-click="close()">close</md-button>       </md-toolbar>       <md-content layout-padding="" layout="column" layout-align="start start">         <md-button ng-click="show('home')" class="md-primary">show home</md-button>         <md-button ng-click="show('work')" class="md-primary">show work</md-button>       </md-content>     </md-sidenav>      <md-content flex="" layout-padding="" layout="column" layout-align="top center">       <md-button ng-click="toggleleft()" class="md-primary">         toggle left       </md-button>       <div ng-switch="toshow">         <div ng-switch-when="home">           home!         </div>         <div ng-switch-when="work">           work!         </div>       </div>     </md-content>   </section> </div> 

js

angular   .module('myapp',['ngmaterial', 'ngmessages', 'material.svgassetscache'])   .controller('appctrl', function ($scope, $mdsidenav) {    $scope.toshow = "home"; // default      $scope.toggleleft = function() {         $mdsidenav("left")           .toggle();     };      $scope.close = function () {       $mdsidenav('left').close();     };      $scope.show = function (toshow) {       $scope.toshow = toshow;     }; });