<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link data-require="angular-material@*" data-semver="1.1.1" rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css" />
<script src="//rawgit.com/MSakamaki/AdventCalendar2014/master/scripts/bower_components/angular-aria/angular-aria.js"></script>
<script src="//rawgit.com/MSakamaki/AdventCalendar2014/master/scripts/bower_components/angular-animate/angular-animate.js"></script>
<script src="//rawgit.com/MSakamaki/AdventCalendar2014/master/scripts/bower_components/hammerjs/hammer.js"></script>
<script data-require="angular-material@*" data-semver="1.1.1" src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script data-require="angular-animate@*" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js"></script>
<script data-require="angular-resource@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-resource.js"></script>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="appController as c" >
<md-toolbar>
<div class="md-toolbar-tools">
<button class="md-icon-button md-button md-ink-ripple hide-gt-xs" type="button">
<md-icon aria-label="More" class="material-icons"></md-icon>
</button>
<!-- ifIsCountry: usa --><h2 class="md-headline " > VWGoA – Online Claims </h2><!-- end ngIf: -->
<!-- ifIsCountry: can -->
<!-- <div if-is-country="can">can</div> -->
<!-- <div if-is-country="usa">usa</div> -->
<!-- <div if-is-authenticated="true">authenticated</div> -->
<!-- <div if-is-authenticated="false">not authenticated</div> -->
<span flex="" class="flex"></span>
<div layout="row" layout-align="start center" class="hide-gt-sm hide-xs layout-align-start-center layout-row">
<a class="md-icon-button md-button md-ink-ripple" aria-label="Login" ng-href="#/login" href="#/login">
<md-icon aria-label="Login" class="material-icons ng-scope"></md-icon>
</a><a class="md-icon-button md-button md-ink-ripple" aria-label="Register" ng-href="#/register" href="#/register">
<md-icon aria-label="Register" class="material-icons ng-scope"></md-icon>
</a><!-- end ngIf: !authentication.authenticated -->
</div>
<div >
<a class="md-button md-ink-ripple" ng-href="#/login" style="vertical-align: middle" href="#/login">
<md-icon>
<i class="material-icons"></i>
</md-icon>
<span>Sign In</span>
</a>
<a class="md-button md-ink-ripple" ng-href="#/register" style="vertical-align: middle" href="#/register">
<md-icon >
<i class="material-icons"></i>
</md-icon>
<span>Register</span>
</a>
<!-- on mouse over functionality -->
<md-menu>
<a class="md-button md-ink-ripple" ng-href="#/register" style="vertical-align: middle" href="#/register" ng-mouseenter="$mdOpenMenu()">
<md-icon >
<i class="material-icons"></i>
</md-icon>
<span >Account</span>
<md-icon>
<i class="material-icons"></i>
</md-icon>
</a>
<md-menu-content width="4" style="top:64px">
<md-menu-item ng-repeat="item in [1, 2, 3]">
<md-button>
Account {{item}}
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<!-- onClick functionality -->
<md-menu>
<md-button aria-label="Open menu with custom trigger" class="md-button md-ink-ripple" ng-click="c.openMenu($mdMenu, $mdOpenMenu,$event)">
<md-icon >
<i class="material-icons"></i>
</md-icon>
<span>Account D</span>
<md-icon>
<i class="material-icons"></i>
</md-icon>
</md-button>
<md-menu-content width="4">
<md-menu-item ng-repeat="item in [1, 2, 3]">
<md-button>
Option {{item}}
</md-button>
</md-menu-item>
</md-menu-content></md-menu>
</div>
</div>
</md-toolbar>
<div layout="row">
<section flex-gt-sm ng-repeat="section in c.statusSections">
<header>
<h2 class="md-subhead">{{ section.id | uppercase}} </h2>
</header>
<md-list>
<md-list-item class="md-2-line" ng-repeat="page in section.pages">
<md-icon>
<i class="material-icons" data-ng-if="page.status"></i>
<i class="material-icons" data-ng-if="status">๕</i>
</md-icon>
<div class="md-list-item-text">
<h3>{{ page.id}}</h3>
</div>
<md-icon>
<md-tooltip md-direction="top">{{ page.title}}</md-tooltip>
<i class="material-icons"></i>
</md-icon>
</md-list-item>
</md-list>
</section>
</div>
</div>
</body>
</html>
// Code goes here
(function(){
var appController = function($scope,$log){
var c = this;
c.name =" Karunakar";
c.openMenu = function($mdMenu,$mdOpenMenu, ev){
console.log($mdMenu);
console.log($mdOpenMenu)
console.log('inside of openMenu function... ');
$mdOpenMenu(ev);
};
c.statusSections = [{
id:"Registration",
pages:[{
id:"Profile Completed",
title:"Profile completed title",
status:true
}]
},
{
id:"Documentation",
pages:[{
id:"Profile Completed",
title:"Profile completed title",
status:true
}]
},
{
id:"Qualification",
pages:[{
id:"Profile Completed",
title:"Profile completed title",
status:true
}]
},
{
id:"Completion",
pages:[{
id:"Profile Completed",
title:"Profile completed title",
status:true
}]
}
];
}
appController.inject = ['$scope','$log'];
angular.module('app',['ngMaterial']).controller('appController', appController);
})();
/* Styles go here */
i.material-icons.ng-scope{
color:coral;
margin-top:10px !important;
margin-bottom:0px !important;
}
.material-icons {
margin-right:10px !important;
}
section{
border:1px solid #333;
margin:3px;
}
/* added code to for dropdown position */
.md-open-menu-container{
top:64px !important;
}