Motion >> Repos - motion-next.git/blob

   1 <div class="navigation-toggle" hide-gt-sm>
   2   <md-button
   3     class="md-icon-button"
   4     ng-click="vm.toggleHorizontalMobileMenu()"
   5     aria-label="Toggle Mobile Navigation"
   6   >
   7     <md-icon md-font-icon="icon-menu"></md-icon>
   8   </md-button>
   9 </div>
  10
  11 <ul class="horizontal">
  12   <li
  13     ng-repeat="node in vm.navigation"
  14     ms-navigation-horizontal-node="node"
  15     ng-class="{'has-children': vm.hasChildren}"
  16     ng-include="'navigation-horizontal-nested.html'"
  17   ></li>
  18 </ul>
  19
  20 <!-- Nested horizontal navigation template -->
  21 <script type="text/ng-template" id="navigation-horizontal-nested.html">
  22
  23   <div ms-navigation-horizontal-item layout="row" ng-if="!vm.isHidden()">
  24
  25       <div class="ms-navigation-horizontal-button" ng-if="!node.uisref && node.title"
  26            ng-class="{'active md-accent-bg md-accent-fg': vm.isActive}">
  27           <i class="icon s18 {{node.icon}}" ng-if="node.icon"></i>
  28           <span class="title" translate="{{node.translate}}" flex>{{node.title}}</span>
  29           <span class="badge white-fg" style="background: {{node.badge.color}}" ng-if="node.badge">{{node.badge.content}}</span>
  30           <i class="icon-chevron-right s18 arrow" ng-if="vm.hasChildren"></i>
  31       </div>
  32
  33       <a class="ms-navigation-horizontal-button" ui-sref="{{node.uisref}}" ui-sref-active="active md-accent-bg"
  34          ng-class="{'active md-accent-bg md-accent-fg': vm.isActive}"
  35          ng-if="node.uisref && node.title">
  36           <i class="icon s18 {{node.icon}}" ng-if="node.icon"></i>
  37           <span class="title" translate="{{node.translate}}" flex>{{node.title}}</span>
  38           <span class="badge white-fg" style="background: {{node.badge.color}}" ng-if="node.badge">{{node.badge.content}}</span>
  39           <i class="icon-chevron-right s18 arrow" ng-if="vm.hasChildren"></i>
  40       </a>
  41
  42   </div>
  43
  44   <ul ng-if="vm.hasChildren && !vm.isHidden()">
  45       <li ng-repeat="node in node.children" ms-navigation-horizontal-node="node"
  46           ng-class="{'has-children': vm.hasChildren}"
  47           ng-include="'navigation-horizontal-nested.html'"></li>
  48   </ul>
  49 </script>
  50 <!-- / Nested navigation template -->