<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.4/angular-material.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>
<body ng-app="plnkrApp" ng-controller="DemoController" layout="column">
<section layout="row" flex>
<md-content flex layout-padding>
<md-toolbar class="md-theme-indigo">
<h1 class="md-toolbar-tools">Content</h1>
</md-toolbar>
<md-button ng-click="clickSide('left')">Click Left</md-button>
<md-button ng-click="clickSide('right')">Click Right</md-button>
</md-content>
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content layout-padding="">
<md-tabs>
<md-tab label="Tab #1"></md-tab>
<md-tab label="Tab #2"></md-tab>
<md-tab label="Tab #3"></md-tab>
</md-tabs>
</md-content>
</md-sidenav>
<md-sidenav class="md-sidenav-right" md-component-id="right">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content layout-padding="">
<md-tabs>
<md-tab label="Tab #1"></md-tab>
<md-tab label="Tab #2"></md-tab>
<md-tab label="Tab #3"></md-tab>
</md-tabs>
</md-content>
</md-sidenav>
</section>
</body>
</html>
/* Styles go here */
/* .md-sidenav-right {
left: inherit;
right: 0;
transform: translate3d(-100%,0,0);
}
.md-sidenav-right.md-closed {
transform: translate3d(-100%,0,0);
} */
var app = angular.module('plnkrApp', ['ngMaterial']);
app
.controller("DemoController", function($scope, $mdSidenav){
$scope.helloworld = 'Hello World';
$scope.clickSide = function(dir) {
$mdSidenav(dir).toggle();
};
});