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

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

@@ -1,4 +1,5 @@
 <!-- This a higher order component that composes `NavItemComponent`  -->
+<ng-container *ngIf="!hideIfEmpty || nestedNavComponents.length > 0">
   <bit-nav-item
     [text]="text"
     [icon]="icon"
@@ -52,3 +53,4 @@
       <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,