Added mobileOnly property to nav. item objects; when 'true' items only display in mobile mode.

Author: dtaylor113

src/navigation/examples/vertical-navigation-basic.js

@@ -35,6 +35,8 @@
  *   <li>.tooltip      - (string) Tooltip to display for the badge
  *   <li>.badgeClass:  - (string) Additional class(es) to add to the badge container
  *   </ul>
+ * <li>.mobileOnly     - (string) When set to 'true', menu item will only be displayed when browser is in mobile mode (<768px).
+ * When <code>ignoreMobile</code> flag set to 'true', <code>mobileOnly</code> items are not displayed.
  * </ul>
  * @param {function} navigateCallback function(item) Callback method invoked on a navigation item click (one with no submenus)
  * @param {function} itemClickCallback function(item) Callback method invoked on an item click
@@ -392,9 +394,19 @@
            href: "#/adipscing"
         },
         {
-           title: "Lorem",
-           iconClass: "fa fa-gamepad",
-           href: "#/lorem"
+           title: "Help",
+           iconClass: "fa pficon-help",
+           href: "#/help",
+           mobileOnly: "true"
+        },
+        {
+           title: "User",
+           iconClass: "fa pficon-user",
+           mobileOnly: "true",
+           children: [
+              { title: "Preferences" },
+              { title: "Logout" }
+           ]
         },
         {
            title: "Exit Demo"

src/navigation/vertical-navigation.component.js

@@ -563,4 +563,12 @@ angular.module('patternfly.navigation').component('pfVerticalNavigation', {
       }
     };
   }
+})
+.filter('navItems', function () {
+  'use strict';
+  return function (items, inMobileState) {
+    return items ? items.filter(function (item) {
+      return item.mobileOnly === undefined || (item.mobileOnly === 'true' && inMobileState);
+    }) : null;
+  };
 });

src/navigation/vertical-navigation.html

@@ -30,7 +30,7 @@
                     'force-hide-secondary-nav-pf': $ctrl.forceHidden,
                     'show-mobile-nav': $ctrl.showMobileNav}">
       <ul class="list-group">
-        <li ng-repeat="item in $ctrl.items" class="list-group-item"
+        <li ng-repeat="item in $ctrl.items | navItems:$ctrl.inMobileState" class="list-group-item"
             ng-class="{'secondary-nav-item-pf': item.children && item.children.length > 0,
                        'active': item.isActive,
                        'is-hover': item.isHover,