<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body ng-app="navBar" ng-cloak>
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links" class="myNavBar">
<md-nav-item md-nav-click="goto('home')" name="home">HOME </md-nav-item>
<md-nav-item md-nav-click="goto('mycoverage')" name="mycoverage">MY COVERAGE</md-nav-item>
<md-nav-item md-nav-click="goto('myclaims')" name="myclaims"> MY CLAIMS</md-nav-item>
<md-nav-item md-nav-click="goto('mybenefits')" name="mybenefits"> MY BENEFITS</md-nav-item>
<md-nav-item md-nav-click="goto('careoptions')" name="caroptions"> CAR OPTIONS</md-nav-item>
<md-nav-item md-nav-click="goto('messages')" name="messages"> MESSAGES</md-nav-item>
<md-nav-item md-nav-click="goto('actioncenter')" name="actioncenter"> ACTION CENTER</md-nav-item>
<md-nav-item md-nav-click="goto('needassistance')" name="needassistance"> NEED ASSISTANCE? </md-nav-item>
</md-nav-bar>
</md-content>
<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak>
<section layout="row" flex>
<md-content flex layout-padding>
<div>
<md-button ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary">
Ham burger
</md-button>
</div>
</div>
<div flex></div>
</md-content>
<md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Sidenav Right</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" layout-padding>
<ul>
<li>Home </li>
<li> MY CLAIMS</li>
<li> MY BENEFITS </li>
</ul>
<!-- <md-button ng-click="close()" class="md-primary">
Close Sidenav Right-->
</md-button>
</md-content>
</md-sidenav>
</section>
</div>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.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-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script>
(function() {
'use strict';
angular.module('navBar', ['ngMaterial'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'home';
}
})();
angular
.module('navBar', ['ngMaterial'])
/*.config(function($mdThemingProvider) {
$mdThemingProvider.disableTheming();
})*/
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.accentPalette('blue');
})
.controller('AppCtrl', function($scope, $timeout, $mdSidenav, $log) {
$scope.toggleLeft = buildDelayedToggler('left');
$scope.toggleRight = buildToggler('right');
$scope.isOpenRight = function() {
return $mdSidenav('right').isOpen();
};
/**
* Supplies a function that will continue to operate until the
* time is up.
*/
function debounce(func, wait, context) {
var timer;
return function debounced() {
var context = $scope,
args = Array.prototype.slice.call(arguments);
$timeout.cancel(timer);
timer = $timeout(function() {
timer = undefined;
func.apply(context, args);
}, wait || 10);
};
}
/**
* Build handler to open/close a SideNav; when animation finishes
* report completion in console
*/
function buildDelayedToggler(navID) {
return debounce(function() {
// Component lookup should always be available since we are not using `ng-if`
$mdSidenav(navID)
.toggle()
.then(function() {
$log.debug("toggle " + navID + " is done");
});
}, 200);
}
function buildToggler(navID) {
return function() {
// Component lookup should always be available since we are not using `ng-if`
$mdSidenav(navID)
.toggle()
.then(function() {
$log.debug("toggle " + navID + " is done");
});
}
}
})
.controller('LeftCtrl', function($scope, $timeout, $mdSidenav, $log) {
$scope.close = function() {
// Component lookup should always be available since we are not using `ng-if`
$mdSidenav('left').close()
.then(function() {
$log.debug("close LEFT is done");
});
};
})
.controller('RightCtrl', function($scope, $timeout, $mdSidenav, $log) {
$scope.close = function() {
// Component lookup should always be available since we are not using `ng-if`
$mdSidenav('right').close()
.then(function() {
$log.debug("close RIGHT is done");
});
};
});
</script>
</body>
</html>
// Code goes here
name {
position: relative;
left: 5px;
}
.myNavBar {}
.myNavBar>div {
border-bottom: none;
background-color: #000066;
}
.myNavBar li.md-nav-item {
border-right: 1px solid #2c45e6;
width: 12%;
text-align: center;
}
.myNavBar li.md-nav-item button:hover {
font-weight: bold;
}
.myNavBar li.md-nav-item:nth-last-child(1) {
border-right: none;
}
.myNavBar ul._md-nav-bar-list {
padding: 8px 0px;
}
md-nav-bar .md-button._md-nav-button.md-unselected {
color: #ffffff;
}
.md-button._md-nav-button {
padding: 0px 4px;
}
.md-nav-bar {
height: auto;
}
md-nav-ink-bar[class^="_md-"]{
width: 0px !important;
}
md-nav-ink-bar[class^="_md-"]:before {
content: '';
display: block;
position: absolute;
top: -17px;
left: 30px;
width: 0;
height: 0;
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 10px;
}