<!DOCTYPE html>
<html ng-app="app">
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,700,700italic" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular-sanitize.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.js"></script>
<script data-require="encore-ui@0.3.1" data-semver="0.3.1" src="https://95c7050854423f809e66-6999ba0e7a4f47d417515fb3f08fa9b8.ssl.cf1.rackcdn.com/encore-ui-tpls-0.3.1.min.js"></script>
<script src="script.js"></script>
<!-- css -->
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.0/normalize.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/pure/0.3.0/pure-min.css" rel="stylesheet" />
<link href="http://rackerlabs.github.io/encore-ui/assets/prism.css" rel="stylesheet" />
<link data-require="encore-ui@0.3.1" data-semver="0.3.1" rel="stylesheet" href="https://95c7050854423f809e66-6999ba0e7a4f47d417515fb3f08fa9b8.ssl.cf1.rackcdn.com/encore-ui-0.3.1.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- svg sprite -->
<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="32" viewBox="0 0 72 32">
<defs>
<g id="icon-logo">
<path class="path1" d="M14.31 16.25c0-1.081-0.202-2.080-0.594-3.007-0.392-0.927-0.95-1.735-1.676-2.412-0.725-0.689-1.581-1.224-2.579-1.604-0.998-0.38-2.092-0.582-3.292-0.582h-5.978v15.307h5.99c1.2 0 2.294-0.202 3.292-0.594 0.998-0.392 1.854-0.927 2.579-1.616 0.725-0.689 1.283-1.497 1.676-2.424 0.392-0.927 0.594-1.937 0.594-3.018v-0.047zM10.793 16.333c0 0.689-0.119 1.307-0.345 1.854-0.226 0.558-0.535 1.034-0.939 1.438-0.404 0.404-0.891 0.725-1.45 0.939s-1.2 0.333-1.878 0.333h-2.603v-9.222h2.603c0.689 0 1.307 0.119 1.878 0.345 0.57 0.226 1.058 0.547 1.45 0.95 0.404 0.404 0.713 0.891 0.939 1.462 0.226 0.57 0.345 1.188 0.345 1.854v0.047z"></path>
<path class="path2" d="M31.019 21.478l-2.139-2.163c-0.594 0.558-1.2 0.986-1.806 1.307s-1.343 0.476-2.222 0.476c-0.654 0-1.26-0.131-1.806-0.38-0.547-0.25-1.010-0.606-1.402-1.034-0.392-0.44-0.689-0.951-0.903-1.533-0.214-0.582-0.333-1.2-0.333-1.854v-0.047c0-0.654 0.107-1.271 0.333-1.842 0.214-0.57 0.523-1.081 0.915-1.521 0.392-0.44 0.868-0.784 1.414-1.022 0.547-0.249 1.141-0.368 1.783-0.368 0.773 0 1.474 0.154 2.092 0.463 0.618 0.309 1.224 0.725 1.83 1.271l2.139-2.472c-0.345-0.345-0.725-0.665-1.141-0.963-0.404-0.297-0.856-0.535-1.331-0.749-0.476-0.202-1.022-0.368-1.604-0.476-0.594-0.119-1.248-0.178-1.961-0.178-1.176 0-2.258 0.202-3.232 0.618-0.974 0.416-1.818 0.986-2.52 1.711-0.701 0.725-1.248 1.557-1.64 2.52-0.392 0.95-0.594 1.985-0.594 3.078v0.047c0 1.093 0.202 2.115 0.594 3.078s0.939 1.795 1.64 2.508c0.701 0.713 1.533 1.26 2.496 1.676 0.963 0.404 2.008 0.618 3.125 0.618 0.749 0 1.414-0.059 2.008-0.19 0.594-0.119 1.153-0.309 1.652-0.547 0.499-0.238 0.963-0.523 1.39-0.868 0.416-0.368 0.82-0.749 1.224-1.165v0z"></path>
<path class="path3" d="M42.927 16.777l-3.638-5.332 3.485-5.096h-2.61l-2.208 3.388-2.194-3.388h-2.68l3.485 5.123-3.624 5.304h2.61l2.36-3.568 2.332 3.568h2.68z"></path>
</g>
<g id="icon-open-external">
<path class="path1" d="M8 24v-14h8l-2 2h-4v10h10v-4l2-2v8h-14zM14 16.578l8.594-8.578h-6.594v-2h10v10h-2v-6.594l-8.594 8.594z"></path>
</g>
</defs>
</svg>
<div ng-controller="Ctrl">
<br />
<h1>With both custom links & logo:</h1>
<br />
<test-nav links="customLinks" logo="logoMarkup"></test-nav>
<br />
<h1>With just custom links</h1>
<br />
<test-nav links="customLinks"></test-nav>
<br />
<h1>With just logo</h1>
<br />
<test-nav logo="logoMarkup"></test-nav>
<br />
<h1>With custom links and ui-router ui-sref</h1>
<br />
<test-nav links="customLinks" ui-router="true"></test-nav>
<a ui-sref="main">Show Main Content</a>
<div ui-view></div>
</div>
<script src="http://rackerlabs.github.io/encore-ui/assets/prism.js"></script>
</body>
</html>
angular.module('app', ['encore.ui', 'ui.router'])
.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('main', {
url: "/main",
templateUrl: "main.html"
})
.state('main.link1', {
url: "/link1",
templateUrl: "main.link1.html"
})
.state('main.link2', {
url: "/link2",
templateUrl: "main.link2.html"
})
})
.controller("Ctrl", function($scope, $sce) {
$scope.logoMarkup = $sce.trustAsHtml('<svg class="icon icon-logo" viewBox="0 0 24 32">' +
'<use xlink:href="#icon-logo"></use></svg>');
$scope.customLinks = [
{
linkText: 'Stuff',
items: [
{
title: 'Link 1',
path: '.link1'
},
{
title: 'Link 2',
path: '.link2'
}
]
},
{
linkText: 'More Stuff',
items: [
{
title: 'Link 1',
path: '.link1'
},
{
title: 'Link 2',
path: '.link2'
}
]
}
];
})
.directive('testNav', function () {
return {
templateUrl: 'testNav.html',
restrict: 'E',
scope: {
'searchFunction': '&',
'placeholderText': '@',
'links': '=?',
'logo': '=?',
'uiRouter': '=?'
},
controller: function ($scope) {
$scope.bookmarks = {
linkText: 'Bookmarks',
items: [
{
title: 'Bookmarks go here!',
path: '/'
}
]
};
$scope.dashboards = {
linkText: 'Dashboards',
items: [
{
title: 'Link 1',
path: '/path'
},
{
title: 'Link 2',
path: '/path2'
},
{
title: 'Link 3',
path: '/path3'
}
]
};
$scope.internalTools = {
linkText: 'Internal Tools',
items: [
{ title: 'Ticket Queues', path: '/#/ticketqueues/', className: '' }
]
};
}
};
})
.directive('testDropdown', function ($rootScope) {
return {
restrict: 'E',
templateUrl: 'testDropdown.html',
link: function (scope, element) {
scope.visible = false;
scope.toggle = function ($event) {
$event.preventDefault();
scope.visible = !scope.visible;
$rootScope.$broadcast('dropdownShow', element);
};
scope.$on('dropdownShow', function (ev, el) {
if (el[0] !== element[0]) {
scope.visible = false;
}
});
},
scope: {
visible: '&',
menu: '=',
uiRouter: '=?'
}
};
});
/* Styles go here */
.pure-g > div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1em;
}
.component {
border-bottom: 1px solid #ddd;
margin-bottom: 2em;
padding-bottom: 2em;
}
/* SVG Icon Sprites */
.icon {
display: inline-block;
fill: #ffffff;
}
.icon-logo {
padding: 0;
margin: 0;
float: left;
width: 122px;
height: 64px;
}
<header class="site-header">
<h1 class="logo" ng-if="!logo"><a href="/">Encore</a></h1>
<div ng-if="logo" ng-bind-html="logo"></div>
<rx-global-search placeholder-text="{{ placeholderText }}" search-function="searchFunction()"></rx-global-search>
<nav class="main-nav">
<ul>
<!-- li class="nav-item"><rx-dropdown menu="dashboards"></rx-dropdown></li -->
<li class="nav-item" ng-hide="links"><test-dropdown menu="bookmarks"></test-dropdown></li>
<li class="nav-item" ng-hide="links"><test-dropdown menu="internalTools"></test-dropdown></li>
<li class="nav-item" ng-show="links" ng-repeat="link in links"><test-dropdown menu="link" ui-router="uiRouter"></test-dropdown></li>
</ul>
</nav>
<nav class="user-nav">
<ul>
<!-- li class="nav-item"><a href="#" class="nav-link">Notifications (0)</a></li -->
<!-- li class="nav-item"><a href="#" class="nav-link">Support</a></li -->
<!-- li class="nav-item"><a href="#" ng-click="userSettings($event)" class="nav-link">Settings</a></li -->
<li class="nav-item"><a href="/login" rx-logout class="nav-link">{{ uiRouter ? "true" : "false" }}</a></li>
</ul>
</nav>
<div class="sub-header">
<nav class="site-breadcrumbs">
<rx-breadcrumbs></rx-breadcrumbs>
</nav>
<a class="bookmark" href="#"><i class="fa fa-bookmark"></i> Bookmark this page</a>
</div>
</header>
<div class="dropdown">
<a href="#" ng-click="toggle($event)" class="nav-link">{{menu.linkText}} <b class="caret"></b></a>
<ol class="nav-dropdown group" ng-show="visible">
<li ng-repeat="item in menu.items" class="item {{item.className}}">
<a ng-if="!uiRouter" href="{{item.path}}" class="item-target ">{{item.title}} </a>
<a ng-if="uiRouter" ui-sref="{{item.path}}" class="item-target ">{{item.title}} </a>
<ul class="dropdown-menu" ng-show="item.sub">
<li ng-repeat="subItem in item.sub">
<a ng-if="!uiRouter" href="{{subItem.path}}">{{subItem.title}}</a>
<a ng-if="uiRouter" ui-sref="{{subItem.path}}">{{subItem.title}}</a>
</li>
</ul>
</li>
</ol>
</div>
<h1>Link1</h1>
<h1>Link2</h1>
<h1>Main</h1>