fix(nav-drawer): Mini variant not initially visible

Closes #1266

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Mask input - after a form `reset` call correctly update underlying input value and placeholder state
 - Tree - setting `--ig-size` on the item `indicator` CSS Part will now change the size of the icon
 - Date-time input - double emit of `igcChange` in certain scenarios
+- - Navigation drawer - mini variant is not initially rendered when not in an open state [#1266](https://github.com/IgniteUI/igniteui-webcomponents/issues/1266)
 
 ## [4.9.0] - 2024-04-30
 ### Added

src/components/nav-drawer/nav-drawer.spec.ts

@@ -146,6 +146,25 @@ describe('Navigation Drawer', () => {
       computedStyles = window.getComputedStyle(mini);
       expect(computedStyles.getPropertyValue('display')).to.not.equal('none');
     });
+
+    it('initial render of a navbar with mini slot', async () => {
+      el = await fixture<IgcNavDrawerComponent>(html`
+        <igc-nav-drawer>
+          <div slot="mini">
+            <igc-nav-drawer-item>
+              <igc-icon slot="icon" name="home"></igc-icon>
+            </igc-nav-drawer-item>
+
+            <igc-nav-drawer-item>
+              <igc-icon slot="icon" name="search"></igc-icon>
+            </igc-nav-drawer-item>
+          </div>
+        </igc-nav-drawer>
+      `);
+
+      expect(el.open).to.be.false;
+      expect(el.renderRoot.querySelector<Element>('[part="mini"]')).to.exist;
+    });
   });
 
   const createNavDrawerElement = (

src/components/nav-drawer/nav-drawer.ts

@@ -16,12 +16,12 @@ import { styles as shared } from './themes/shared/container/nav-drawer.common.cs
  *
  * @element igc-nav-drawer
  *
- * @slot - The default slot for the drawer.
- * @slot mini - The slot for the mini variant of the drawer.
+ * @slot - The default slot for the igc-navigation-drawer.
+ * @slot mini - The slot for the mini variant of the igc-navigation-drawer.
  *
- * @csspart base - The base wrapper of the navigation drawer.
- * @csspart main - The main container.
- * @csspart mini - The mini container.
+ * @csspart base - The base wrapper of the igc-navigation-drawer.
+ * @csspart main - The main container of the igc-navigation-drawer.
+ * @csspart mini - The mini container of the igc-navigation-drawer.
  */
 @themes(all)
 export default class IgcNavDrawerComponent extends LitElement {
@@ -54,6 +54,12 @@ export default class IgcNavDrawerComponent extends LitElement {
   @property({ type: Boolean, reflect: true })
   public open = false;
 
+  protected override createRenderRoot() {
+    const root = super.createRenderRoot();
+    root.addEventListener('slotchange', () => this.requestUpdate());
+    return root;
+  }
+
   /** Opens the drawer. */
   public show() {
     if (this.open) {
@@ -74,21 +80,15 @@ export default class IgcNavDrawerComponent extends LitElement {
 
   /** Toggles the open state of the drawer. */
   public toggle() {
-    if (this.open) {
-      this.hide();
-    } else {
-      this.show();
-    }
+    this.open ? this.hide() : this.show();
   }
 
-  private resolvePartNames(base: string) {
-    return {
-      [base]: true,
+  protected override render() {
+    const parts = partNameMap({
+      mini: true,
       hidden: this._miniSlotElements.length < 1,
-    };
-  }
+    });
 
-  protected override render() {
     return html`
       <div part="overlay" @click=${this.hide}></div>
 
@@ -98,7 +98,7 @@ export default class IgcNavDrawerComponent extends LitElement {
         </div>
       </div>
 
-      <div part="${partNameMap(this.resolvePartNames('mini'))}">
+      <div part=${parts}>
         <slot name="mini"></slot>
       </div>
     `;