feat(vertical-navigation): added showMenuCollapsed attribute (#441)

This allows developers to maintain collapsed state, for the hamburger menu, should the page be refreshed.

Author: dlabrecq

src/app/navigation/vertical-navigation/vertical-navigation.component.spec.ts

@@ -615,6 +615,16 @@ describe('Vertical Navigation component - ', () => {
     expect(badgesShown).toBeNull();
   });
 
+  it('should show initially collapsed menu', function() {
+    let badgesMenu = fixture.debugElement.query(By.css('.nav-pf-vertical.nav-pf-vertical-with-badges.collapsed'));
+    expect(badgesMenu).toBeNull();
+
+    comp.showMenuCollapsed = true;
+    fixture.detectChanges();
+
+    badgesMenu = fixture.debugElement.query(By.css('.nav-pf-vertical-with-badges.collapsed'));
+    expect(badgesMenu).toBeNull();
+  });
 });
 
 

src/app/navigation/vertical-navigation/vertical-navigation.component.ts

@@ -56,9 +56,14 @@ export class VerticalNavigationComponent implements OnInit, OnDestroy {
   @Input() contentContainer: HTMLElement;
 
   /**
-   * Boolean to indicate whether or not to show badges, default: false
+   * Indicates whether or not this is a mobile friendly navigation, default: false
    */
-  @Input() showBadges: boolean = false;
+  @Input() ignoreMobile: boolean = false;
+
+  /**
+   * The navigation items used to build the menu
+   */
+  @Input() items: VerticalNavigationItem[];
 
   /**
    * Indicates whether or not to allow the secondary to persist, default: false
@@ -71,29 +76,31 @@ export class VerticalNavigationComponent implements OnInit, OnDestroy {
   @Input() pinnableMenus: boolean = false;
 
   /**
-   * Show menu icons, default: true
+   * Boolean to indicate whether or not to show badges, default: false
    */
-  @Input() showIcons: boolean = true;
+  @Input() showBadges: boolean = false;
 
   /**
-   * The navigation items used to build the menu
+   * Show menu icons, default: true
    */
-  @Input() items: VerticalNavigationItem[];
+  @Input() showIcons: boolean = true;
 
   /**
-   * Sets an active flag on items when they are selected, default: false
+   * Boolean indicating menu is shown initially collapsed
+   *
+   * Note that this does not apply for the mobile state
    */
-  @Input() updateActiveItemsOnClick: boolean = false;
+  @Input() showMenuCollapsed: boolean = false;
 
   /**
-   * Indicates whether or not this is a mobile friendly navigation, default: false
+   * Show top banner, default: true
    */
-  @Input() ignoreMobile: boolean = false;
+  @Input() showTopBanner: boolean = true;
 
   /**
-   * Show top banner, default: true
+   * Sets an active flag on items when they are selected, default: false
    */
-  @Input() showTopBanner: boolean = true;
+  @Input() updateActiveItemsOnClick: boolean = false;
 
   /**
    * This event is fired any time the user has initiated navigation
@@ -160,6 +167,9 @@ export class VerticalNavigationComponent implements OnInit, OnDestroy {
       this.initActiveItems();
     }
 
+    if (this.showMenuCollapsed !== undefined) {
+      this.explicitCollapse = this.showMenuCollapsed;
+    }
     this.initBodyElement();
     this.checkNavState();
   }