fix(pfVerticalNavigation): Masthead items work with ignoreMobile flag

patternfly · Jun 19, 2018 · 10a7414 · 10a7414
1 parent f3e71c9
commit 10a7414
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/src/navigation/vertical-navigation.html b/src/navigation/vertical-navigation.html
@@ -1,6 +1,6 @@
 <div>
   <nav class="navbar navbar-pf-vertical">
-    <div class="navbar-header">
+    <div class="navbar-header" ng-class="{'ignore-mobile': $ctrl.ignoreMobile}">
       <button type="button" class="navbar-toggle" ng-click="$ctrl.handleNavBarToggleClick()">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
@@ -12,7 +12,8 @@
         <span class="navbar-brand-txt" ng-if="!$ctrl.brandSrc">{{$ctrl.brandAlt}}</span>
       </span>
     </div>
-    <nav class="collapse navbar-collapse" ng-transclude></nav>
+    <nav class="collapse navbar-collapse"
+         ng-class="{'ignore-mobile': $ctrl.ignoreMobile}" ng-transclude></nav>
     <div class="nav-pf-vertical"
          ng-class="{'nav-pf-persistent-secondary': $ctrl.persistentSecondary,
                     'nav-pf-vertical-collapsible-menus': $ctrl.pinnableMenus,
@@ -36,7 +37,8 @@
                        'is-hover': item.isHover,
                        'mobile-nav-item-pf': item.isMobileItem && $ctrl.showMobileSecondary,
                        'mobile-secondary-item-pf': item.isMobileItem && $ctrl.showMobileTertiary,
-                       'visible-xs': item.mobileOnly}"
+                       'hidden': item.mobileOnly && $ctrl.ignoreMobile,
+                       'visible-xs': item.mobileOnly && !$ctrl.ignoreMobile}"
             ng-mouseenter="$ctrl.handlePrimaryHover(item)" ng-mouseleave="$ctrl.handlePrimaryUnHover(item)">
           <a ng-click="$ctrl.handlePrimaryClick(item, $event)">
             <span class="{{item.iconClass}}" ng-if="item.iconClass" ng-class="{hidden: $ctrl.hiddenIcons}"

diff --git a/src/navigation/vertical-navigation.less b/src/navigation/vertical-navigation.less
@@ -0,0 +1,39 @@
+.navbar-header {
+  &.ignore-mobile {
+    float: left;
+  }
+}
+
+.navbar-collapse {
+  &.ignore-mobile {
+    width: auto;
+    border-top: 0;
+    box-shadow: none;
+    display: block;
+
+    .navbar-nav {
+      float: left;
+      margin: 0;
+
+      &.navbar-right {
+        float: right;
+        .dropdown-menu {
+          left: auto;
+          right: 0;
+        }
+      }
+
+      > li {
+        float: left;
+      }
+
+      .open .dropdown-menu {
+        position: absolute;
+        margin-top: 0;
+        background-color: @color-pf-white;
+        border: 1px solid @color-pf-black-400;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+      }
+    }
+  }
+}
diff --git a/styles/angular-patternfly.less b/styles/angular-patternfly.less
@@ -16,3 +16,4 @@
 @import "../src/pagination/pagination.less";
 @import "../src/datepicker/datepicker.less";
 @import "../src/modals/modal-overlay/modal-overlay.less";
+@import "../src/navigation/vertical-navigation.less";