Add support for badges in Vertical Navigation

This adds support for badges which will increase the width of the
navigation menus by 50px to allow space for the badges. To use this
badge support add the class ‘nav-pf-vertical-with-badges’ to the
nav-pf-vertical div as well as the body container.

This also fixes issue patternfly#435

Author: jeff-phillips-18

less/layouts.less

@@ -22,6 +22,9 @@
     }
     .container-pf-nav-pf-vertical {
       margin-left: @nav-pf-vertical-width;
+      &.nav-pf-vertical-with-badges {
+        margin-left: @nav-pf-vertical-badges-width;
+      }
       &.collapsed-nav {
         margin-left: @nav-pf-vertical-collapsed-width;
         &.hidden-icons-pf {
@@ -31,27 +34,52 @@
       &.hidden-nav {
         margin-left: 0; // remove space as left nav is hidden
       }
-      &.container-pf-nav-pf-vertical-with-sub-menus {
-        &.hide-nav-pf {
-          margin-left: 0 !important;
-        }
-        &.collapsed-secondary-nav-pf, &.collapsed-tertiary-nav-pf {
-          margin-left: @nav-pf-vertical-width;
+      &.hide-nav-pf {
+        margin-left: 0 !important;
+      }
+      &.collapsed-secondary-nav-pf, &.collapsed-tertiary-nav-pf {
+        margin-left: @nav-pf-vertical-width;
+        &.nav-pf-vertical-with-badges {
+          margin-left: @nav-pf-vertical-badges-width;
         }
       }
       &.nav-pf-persistent-secondary.secondary-visible-pf {
         @media (min-width: 1200px) {
           margin-left: (@nav-pf-vertical-width + @nav-pf-vertical-width);
+          &.nav-pf-vertical-with-badges {
+            margin-left: (@nav-pf-vertical-badges-width + @nav-pf-vertical-badges-width);
+          }
           &.hidden-nav {
             margin-left: 0; // remove space as left nav is hidden
           }
           &.collapsed-secondary-nav-pf {
             margin-left: @nav-pf-vertical-width;
+            &.nav-pf-vertical-with-badges {
+              margin-left: @nav-pf-vertical-badges-width;
+            }
+          }
+          &.collapsed-tertiary-nav-pf {
+            margin-left: @nav-pf-vertical-width;
+            &.nav-pf-vertical-with-badges {
+              margin-left: @nav-pf-vertical-badges-width;
+            }
           }
           &.collapsed-nav {
             margin-left: (@nav-pf-vertical-collapsed-width + @nav-pf-vertical-width);
+            &.nav-pf-vertical-with-badges {
+              margin-left: (@nav-pf-vertical-collapsed-width + @nav-pf-vertical-badges-width);
+            }
             &.collapsed-secondary-nav-pf {
               margin-left: @nav-pf-vertical-width;
+              &.nav-pf-vertical-with-badges {
+                margin-left: @nav-pf-vertical-badges-width;
+              }
+            }
+            &.collapsed-tertiary-nav-pf {
+              margin-left: @nav-pf-vertical-width;
+              &.nav-pf-vertical-with-badges {
+                margin-left: @nav-pf-vertical-badges-width;
+              }
             }
             &.hidden-icons-pf {
               margin-left: 0;

less/variables.less

@@ -385,6 +385,7 @@
 @input-color:                                                       @gray-dark;
 @nav-tabs-active-link-hover-color:                                  @link-color;
 @nav-tabs-justified-link-border-color:                              @nav-tabs-border-color;
+@nav-pf-vertical-badges-width:                                      (@nav-pf-vertical-width + 50px);
 @padding-small-horizontal:                                          @padding-base-horizontal;
 @padding-small-vertical:                                            @padding-base-vertical;
 @panel-danger-border:                                               @brand-danger;