<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/santisolari17/pen/GjvaRa?depth=everything&limit=all&order=popularity&page=61&q=material+&show_forks=false" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css'><link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.1/docs.css'>
<style class="cp-pen-styles">.red { background-color: red;}
.blue { background-color: blue;}
.lightgreen { background-color: lightgreen;}
.section{ height: 100%;}
.locked-sidebar { background-color: #FAFAFA;}
.side-button-active{
background-color: #69F0AE;
}
.side-icon-active{
color: #FFFFFF;
}
.side-icon-inactive{
color: #000000;
}
.side-toolbar{
background-color: #35A62D;
font-color: #FAFAFA;
}
.md-button.sidebar-button{
min-width: 2px;
max-width: 100%;
min-height: 2px;
max-height: 50px;
margin-left: 12px;
width: 51px;
padding-left: 0px;
}
md-sidenav.locked-sidebar,
md-sidenav.md-locked-open.locked-sidebar,
md-sidenav.md-closed.md-locked-open-add-active.locked-sidebar {
min-width: 4em !important;
width: 85vw !important;
max-width: 4em !important;
overflow-x: hidden;
}
md-sidenav.toggleable-sidebar,
md-sidenav.md-locked-open.toggleable-sidebar,
md-sidenav.md-closed.md-locked-open-add-active.toggleable-sidebar {
min-width: 0em !important;
width: 85vw !important;
max-width: 20em !important;
} </style></head><body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<div ng-app="myApp" ng-controller="appCtrl" layout="column" class="section" ng-cloak>
<md-toolbar md-whiteframe="4" layout="row">
<md-list layout="row">
<md-list-item>
<md-button class="md-icon-button" aria-label="Settings" ng-click="closeSidenav()" ng-disabled="!isOpen"><md-icon class="material-icons">reorder</md-icon></md-button>
</md-list-item>
<md-list-item>
Angular Material Custom Sidenav Template
</md-list-item>
</md-list>
</md-toolbar>
<div class="container" layout="row" flex>
<md-sidenav md-component-id="l-sidenav" class="locked-sidebar" md-is-locked-open="true" md-whiteframe="4">
<md-list>
<md-list-item ng-click="toggleExpanded(1)" ng-class="{ 'side-button-active': isSelected(1) && isOpen }">
<i ng-class="{ 'side-icon-active': isSelected(1) && isOpen,'side-icon-inactive': !isSelected(1), 'material-icons': true}">assignment</i>
</md-list-item>
<md-list-item ng-click="toggleExpanded(2)" ng-class="{ 'side-button-active': isSelected(2) && isOpen }">
<i ng-class="{ 'side-icon-active': isSelected(2) && isOpen,'side-icon-inactive': !isSelected(2), 'material-icons': true}">person</i>
</md-list-item>
<md-list-item ng-click="toggleExpanded(3)" ng-class="{ 'side-button-active': isSelected(3) && isOpen }">
<i ng-class="{ 'side-icon-active': isSelected(3) && isOpen,'side-icon-inactive': !isSelected(3), 'material-icons': true}">list</i>
</md-list-item>
<md-list-item ng-click="toggleExpanded(4)" ng-class="{ 'side-button-active': isSelected(4) && isOpen }">
<i ng-class="{ 'side-icon-active': isSelected(4) && isOpen,'side-icon-inactive': !isSelected(4), 'material-icons': true}">laptop</i>
</md-list-item>
<md-list-item ng-click="toggleExpanded(5)" ng-class="{ 'side-button-active': isSelected(5) && isOpen }">
<i ng-class="{ 'side-icon-active': isSelected(5) && isOpen,'side-icon-inactive': !isSelected(5), 'material-icons': true}">phone</i>
</md-list-item>
</md-list>
</md-sidenav>
<md-sidenav md-component-id="t-sidenav" class="toggleable-sidebar" ng-show="isOpen" md-is-locked-open="true" md-whiteframe="4">
<section ng-show="isSelected(1)" layout="column">
<md-toolbar class="md-toolbar-tools side-toolbar md-accent">
<h1>Content 1</h1>
</md-toolbar>
<md-content layout-padding flex>
Content 1
</md-content>
</section>
<section ng-show="isSelected(2)" layout="column">
<md-toolbar class="md-toolbar-tools side-toolbar md-accent">
<h1>Content 2</h1>
</md-toolbar>
<md-content layout-padding flex>
Content 2
</md-content>
</section>
</md-sidenav>
<md-content layout-margin layout-padding flex="50">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">isOpen</span>
<span class="md-subhead">{{ isOpen }}
</md-input-container></span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-sm card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="start center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</md-content>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script><script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script><script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js'></script>
<script >//app module
(function(){
var app = angular.module('myApp',['ngMaterial','ngAnimate','myControllers']);
app.config(function ($mdThemingProvider) {
$mdThemingProvider
.theme('default')
.primaryPalette('indigo')
.accentPalette('indigo')
.warnPalette('indigo');
});
})(); // app module
//controllers module
(function () {
var app = angular.module('myControllers', ['ngMaterial']);
app.controller('appCtrl', function ($scope, $timeout, $mdSidenav) {
$scope.isOpen = false;
$scope.menuId = 0;
$scope.closeSidenav = function() {
if($scope.isOpen){
$scope.toggleExpanded(0);
$scope.isOpen = false;
}
}
$scope.toggleExpanded = function(selectedMenuId){
if(!$scope.isOpen){
$scope.isOpen = true;
$scope.menuId = selectedMenuId;
}else{
if($scope.menuId === selectedMenuId){
$scope.isOpen = false;
selectedMenuId = 0;
}
$scope.menuId = selectedMenuId;
}
};
$scope.isSelected = function(value) {
return $scope.menuId === value;
};
});
})(); //controllers module
//# sourceURL=pen.js
</script>
</body></html>
