[CL] add `hideIfEmpty` input to bit-nav-group (#12046)

libs/components/src/navigation/nav-group.component.html

@@ -1,5 +1,6 @@
 <!-- This a higher order component that composes `NavItemComponent`  -->
-<bit-nav-item
+<ng-container *ngIf="!hideIfEmpty || nestedNavComponents.length > 0">
+  <bit-nav-item
     [text]="text"
     [icon]="icon"
     [route]="route"
@@ -10,7 +11,7 @@
     (mainContentClicked)="handleMainContentClicked()"
     [ariaLabel]="ariaLabel"
     [hideActiveStyles]="parentHideActiveStyles"
->
+  >
     <ng-template #button>
       <button
         type="button"
@@ -39,10 +40,10 @@
         <ng-container *ngTemplateOutlet="button"></ng-container>
       </ng-container>
     </ng-container>
-</bit-nav-item>
+  </bit-nav-item>
 
-<!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->
+  <!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->
-<ng-container *ngIf="sideNavService.open$ | async">
+  <ng-container *ngIf="sideNavService.open$ | async">
     <div
       *ngIf="open"
       [attr.id]="contentId"
@@ -51,4 +52,5 @@
     >
       <ng-content></ng-content>
     </div>
+  </ng-container>
 </ng-container>

libs/components/src/navigation/nav-group.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterContentInit,
+  booleanAttribute,
   Component,
   ContentChildren,
   EventEmitter,
@@ -40,6 +41,12 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
   @Input()
   open = false;
 
+  /**
+   * Automatically hide the nav group if there are no child buttons
+   */
+  @Input({ transform: booleanAttribute })
+  hideIfEmpty = false;
+
   @Output()
   openChange = new EventEmitter<boolean>();
 

libs/components/src/navigation/nav-group.stories.ts

@@ -88,6 +88,30 @@ export const Default: StoryObj<NavGroupComponent> = {
   }),
 };
 
+export const HideEmptyGroups: StoryObj<NavGroupComponent & { renderChildren: boolean }> = {
+  args: {
+    hideIfEmpty: true,
+    renderChildren: false,
+  },
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+      <bit-side-nav>
+        <bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter" [hideIfEmpty]="hideIfEmpty">
+          <bit-nav-item text="Child A" route="a" icon="bwi-filter" *ngIf="renderChildren"></bit-nav-item>
+          <bit-nav-item text="Child B" route="b" *ngIf="renderChildren"></bit-nav-item>
+          <bit-nav-item text="Child C" route="c" icon="bwi-filter" *ngIf="renderChildren"></bit-nav-item>
+        </bit-nav-group>
+        <bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter">
+          <bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
+          <bit-nav-item text="Child B"></bit-nav-item>
+          <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
+        </bit-nav-group>
+      </bit-side-nav>
+    `,
+  }),
+};
+
 export const Tree: StoryObj<NavGroupComponent> = {
   render: (args) => ({
     props: args,