AngularJS navigation bar
Light Theme
Dark Theme
Install with bower
bower install ice-nav --save
include ice-nav.js then add as module dependency
angular.module('myApp', [ajb.ice-nav])
Ice nav takes a strict json format for your groups and subgroups
$scope.groups = [
{
"name":"Group 1",
"items": [
{"name": "Item 1", "link": "/somelink"},
{"name": "Item 2", "link": "/somelink"}
],
"subGroups": []
},
{
"name": "Group 2",
"items": [],
"subGroups": [
{"name": "Sub Group 1 Item 1", "link": "/somelink"},
{"name": "Sub Group 2 Item 2", "link": "/somelink"}
]
}
]Now in your template you can use the ice nav bar like this
<ice-nav groups="groups"></ice-nav>Optional Fade In (defaults false)
<ice-nav groups="groups" fade="true"></ice-nav>Show or hide groups or items with a isHidden funciton
// in your html
<ice-nav groups="groups" isHidden="shouldHide"></ice-nav>
// in your controller
$scope.shouldHide = function(group) {
// do some logic
if (group.name == "Admin" && loggedInUser.groups.indexOf('Admin') == -1) {
return true
}
return false
}Change to dark theme
<ice-nav groups="groups" class="dark"></ice-nav>