@design-factory/angular 21.1.0 → 22.0.0-next.0

package/fesm2022/design-factory-angular-sidenav.mjs

@@ -1,12 +1,14 @@
 import { createNavManager } from '@design-factory/core/services/navManager';
-import { toAngularSignal, md$, lg$, useDirectiveForHost } from '@design-factory/angular/internals';
+import { useDirectiveForHost } from '@design-factory/angular/internals';
+import { trackWindow } from '@design-factory/angular/breakpoints';
 import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, inject, contentChild, computed, Directive, effect, ChangeDetectionStrategy, Component, linkedSignal, viewChild, contentChildren, booleanAttribute, ElementRef, PLATFORM_ID, signal, Injector, afterRenderEffect, untracked, afterNextRender, ViewEncapsulation } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { input, model, inject, contentChild, computed, Directive, effect, Component, linkedSignal, viewChild, contentChildren, booleanAttribute, ElementRef, PLATFORM_ID, signal, Injector, afterRenderEffect, untracked, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { DfDrawer } from '@design-factory/angular/drawer';
+import { DfIcon } from '@design-factory/angular/icon';
 import { RouterLink, RouterLinkActive } from '@angular/router';
+import { DfIconButton } from '@design-factory/angular/button';
 
 /**
  * Base item class that is extended by desktop and mobile item components
@@ -19,23 +21,27 @@ class DfSidenavItemBaseComponent {
         /**
          * The label of the item
          */
-        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * Collapsed state of the item
          * Only used for the desktop version
-         * @default false
+         * @defaultValue `false`
          */
-        this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+        this.collapsed = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
         /**
          * The icon class name or inline content (e.g., font awesome class)
-         * @default ''
+         * @defaultValue `''`
          */
-        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.icon = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
          * Whether the wrapper component has icon content (internally used)
-         * @default false
+         * @defaultValue `false`
          */
-        this.wrapperHasIconContent = input(false, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
+        this.wrapperHasIconContent = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : /* istanbul ignore next */ []));
         this.sidenav = inject(DfSidenavComponent);
         this.wrapperInstance = inject(DfSidenavItemComponent);
         // check for the parent item to determine nesting level
@@ -44,14 +50,19 @@ class DfSidenavItemBaseComponent {
             skipSelf: true
         });
         this.isFirstLevel = this.parentItem?.['parentWrapper'] === null;
-        this.iconContent = contentChild('dfSidenavIcon', ...(ngDevMode ? [{ debugName: "iconContent" }] : []));
-        this.hasActiveLinks = computed(() => this.childLinks().some((link) => link?.isActiveLink()), ...(ngDevMode ? [{ debugName: "hasActiveLinks" }] : []));
-        this.hasActiveItems = computed(() => this.childItems().some((item) => item?.hasActiveLinks()), ...(ngDevMode ? [{ debugName: "hasActiveItems" }] : []));
-        this.hasActiveChildren = computed(() => this.hasActiveLinks() || this.hasActiveItems(), ...(ngDevMode ? [{ debugName: "hasActiveChildren" }] : []));
+        this.iconContent = contentChild('dfSidenavIcon', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconContent" }] : /* istanbul ignore next */ []));
+        this.hasActiveLinks = computed(() => this.childLinks().some((link) => link?.isActiveLink()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasActiveLinks" }] : /* istanbul ignore next */ []));
+        this.hasActiveItems = computed(() => this.childItems().some((item) => item?.hasActiveLinks()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasActiveItems" }] : /* istanbul ignore next */ []));
+        this.hasActiveChildren = computed(() => this.hasActiveLinks() || this.hasActiveItems(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasActiveChildren" }] : /* istanbul ignore next */ []));
         /**
          * Computed signal indicating if the item has visible children
          */
-        this.hasVisibleChildren = computed(() => this.childLinks().some((link) => link?.['isVisible']()), ...(ngDevMode ? [{ debugName: "hasVisibleChildren" }] : []));
+        this.hasVisibleChildren = computed(() => this.childLinks().some((link) => link?.['isVisible']()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasVisibleChildren" }] : /* istanbul ignore next */ []));
     }
     /**
      * Method to toggle the collapsed state of the item
@@ -66,10 +77,10 @@ class DfSidenavItemBaseComponent {
             this.collapsed.set(!this.collapsed());
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.0", type: DfSidenavItemBaseComponent, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, wrapperHasIconContent: { classPropertyName: "wrapperHasIconContent", publicName: "wrapperHasIconContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, queries: [{ propertyName: "iconContent", first: true, predicate: ["dfSidenavIcon"], descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavItemBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.4", type: DfSidenavItemBaseComponent, isStandalone: true, inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, wrapperHasIconContent: { classPropertyName: "wrapperHasIconContent", publicName: "wrapperHasIconContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, queries: [{ propertyName: "iconContent", first: true, predicate: ["dfSidenavIcon"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavItemBaseComponent, decorators: [{
             type: Directive
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], wrapperHasIconContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperHasIconContent", required: false }] }], iconContent: [{ type: i0.ContentChild, args: ['dfSidenavIcon', { isSignal: true }] }] } });
 
@@ -81,15 +92,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class DfSidenavItemDesktopComponent extends DfSidenavItemBaseComponent {
     constructor() {
         super();
-        this.childLinks = computed(() => this.wrapperInstance['childrenLinks']().map((link) => link['desktopInstance']()), ...(ngDevMode ? [{ debugName: "childLinks" }] : []));
-        this.childItems = computed(() => this.wrapperInstance['childrenItems']().map((item) => item['desktopInstance']()), ...(ngDevMode ? [{ debugName: "childItems" }] : []));
+        this.childLinks = computed(() => this.wrapperInstance['childrenLinks']().map((link) => link['desktopInstance']()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "childLinks" }] : /* istanbul ignore next */ []));
+        this.childItems = computed(() => this.wrapperInstance['childrenItems']().map((item) => item['desktopInstance']()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "childItems" }] : /* istanbul ignore next */ []));
         this.isVisible = computed(() => {
             const search = this.sidenav['searchTerm']().toLowerCase().trim() || '';
             if (!search) {
                 return true;
             }
             return this.childLinks().some((link) => link?.['isVisible']());
-        }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
         // Automatically collapse when minimized
         effect(() => {
             if (this.sidenav.isMinimized()) {
@@ -109,28 +123,23 @@ class DfSidenavItemDesktopComponent extends DfSidenavItemBaseComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemDesktopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavItemDesktopComponent, isStandalone: true, selector: "df-sidenav-item-desktop", host: { properties: { "class.d-none": "!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavItemDesktopComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfSidenavItemDesktopComponent, isStandalone: true, selector: "df-sidenav-item-desktop", host: { properties: { "class.df-hidden": "!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" } }, usesInheritance: true, ngImport: i0, template: `
     <button
-      class="btn df-sidenav-button d-flex gap-3"
+      class="df-sidenav-button"
       [class.df-sidenav-active-level]="sidenav.isMinimized() && hasActiveChildren() && isFirstLevel"
       [class.df-sidenav-active]="hasActiveChildren()"
-      [class.w-100]="!sidenav.isMinimized()"
       (click)="toggleCollapse()"
       [attr.aria-expanded]="!collapsed()"
-      [class.justify-content-start]="!sidenav.isMinimized()"
       [attr.aria-label]="label()"
     >
       <ng-content select="[dfSidenavIcon]" />
       @if (icon()) {
-        <span class="{{ icon() }}"></span>
+        <df-icon class="{{ icon() }}" />
       }
       @if (!sidenav.isMinimized()) {
-        <span class="sidenav-label" [title]="label()">{{ label() }}</span>
-        <span
-          [class.expanded]="!collapsed()"
-          class="fa-light df-sidenav-collapse-toggle fa-chevron-down ms-auto"
-        ></span>
+        <span class="df-sidenav-label" [title]="label()">{{ label() }}</span>
+        <df-icon [class.expanded]="!collapsed()" class="fa-light df-sidenav-collapse-toggle fa-chevron-down" />
       }
     </button>
 
@@ -140,34 +149,28 @@ class DfSidenavItemDesktopComponent extends DfSidenavItemBaseComponent {
     <ng-template #content>
       <ng-content />
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfIcon, selector: "df-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemDesktopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavItemDesktopComponent, decorators: [{
             type: Component,
             args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'df-sidenav-item-desktop',
                     template: `
     <button
-      class="btn df-sidenav-button d-flex gap-3"
+      class="df-sidenav-button"
       [class.df-sidenav-active-level]="sidenav.isMinimized() && hasActiveChildren() && isFirstLevel"
       [class.df-sidenav-active]="hasActiveChildren()"
-      [class.w-100]="!sidenav.isMinimized()"
       (click)="toggleCollapse()"
       [attr.aria-expanded]="!collapsed()"
-      [class.justify-content-start]="!sidenav.isMinimized()"
       [attr.aria-label]="label()"
     >
       <ng-content select="[dfSidenavIcon]" />
       @if (icon()) {
-        <span class="{{ icon() }}"></span>
+        <df-icon class="{{ icon() }}" />
       }
       @if (!sidenav.isMinimized()) {
-        <span class="sidenav-label" [title]="label()">{{ label() }}</span>
-        <span
-          [class.expanded]="!collapsed()"
-          class="fa-light df-sidenav-collapse-toggle fa-chevron-down ms-auto"
-        ></span>
+        <span class="df-sidenav-label" [title]="label()">{{ label() }}</span>
+        <df-icon [class.expanded]="!collapsed()" class="fa-light df-sidenav-collapse-toggle fa-chevron-down" />
       }
     </button>
 
@@ -179,9 +182,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     </ng-template>
   `,
                     host: {
-                        '[class.d-none]': '!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))'
+                        '[class.df-hidden]': '!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))'
                     },
-                    imports: [NgTemplateOutlet]
+                    imports: [NgTemplateOutlet, DfIcon]
                 }]
         }], ctorParameters: () => [] });
 
@@ -193,11 +196,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
     constructor() {
         super(...arguments);
-        this.childLinks = computed(() => this.wrapperInstance['childrenLinks']().map((link) => link['mobileInstance']()), ...(ngDevMode ? [{ debugName: "childLinks" }] : []));
-        this.childItems = computed(() => this.wrapperInstance['childrenItems']().map((item) => item['mobileInstance']()), ...(ngDevMode ? [{ debugName: "childItems" }] : []));
-        this.isSearching = computed(() => !!this.sidenav['searchTerm']().trim(), ...(ngDevMode ? [{ debugName: "isSearching" }] : []));
+        this.childLinks = computed(() => this.wrapperInstance['childrenLinks']().map((link) => link['mobileInstance']()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "childLinks" }] : /* istanbul ignore next */ []));
+        this.childItems = computed(() => this.wrapperInstance['childrenItems']().map((item) => item['mobileInstance']()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "childItems" }] : /* istanbul ignore next */ []));
+        this.isSearching = computed(() => !!this.sidenav['searchTerm']().trim(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSearching" }] : /* istanbul ignore next */ []));
         // Check if this item is in the navigation path (is an ancestor of current panel)
-        this.isInNavigationPath = computed(() => this.sidenav['mobileNavigationStack']().includes(this.wrapperInstance), ...(ngDevMode ? [{ debugName: "isInNavigationPath" }] : []));
+        this.isInNavigationPath = computed(() => this.sidenav['mobileNavigationStack']().includes(this.wrapperInstance), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isInNavigationPath" }] : /* istanbul ignore next */ []));
         // Check if this item should show as mobile header
         this.shouldShowMobileHeader = computed(() => {
             // Don't show header when searching
@@ -205,7 +212,8 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
                 return false;
             }
             return this.sidenav['currentMobilePanel']() === this.wrapperInstance;
-        }, ...(ngDevMode ? [{ debugName: "shouldShowMobileHeader" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldShowMobileHeader" }] : /* istanbul ignore next */ []));
         // Determine if this item's children should be visible
         this.shouldShowChildren = computed(() => {
             // Mobile with search: show children to display matching links
@@ -214,7 +222,8 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
             }
             // Mobile without search: show if this item is in the navigation path
             return this.isInNavigationPath();
-        }, ...(ngDevMode ? [{ debugName: "shouldShowChildren" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldShowChildren" }] : /* istanbul ignore next */ []));
         // Determine if this item should be visible in the list
         this.isVisibleInList = computed(() => {
             // Mobile with search: don't show items, only links (items just provide structure)
@@ -236,7 +245,8 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
                 const parentMobile = this.parentItem?.['parentWrapper'];
                 return parentMobile === currentPanel && this.isVisible();
             }
-        }, ...(ngDevMode ? [{ debugName: "isVisibleInList" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisibleInList" }] : /* istanbul ignore next */ []));
         // Determine if the entire component should be hidden
         this.shouldHideComponent = computed(() => {
             // Don't hide if this is the current mobile panel showing its children
@@ -245,7 +255,8 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
             }
             // Otherwise, use the regular visibility logic
             return !this.isVisibleInList() && !this.shouldShowChildren();
-        }, ...(ngDevMode ? [{ debugName: "shouldHideComponent" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "shouldHideComponent" }] : /* istanbul ignore next */ []));
         this.isVisible = computed(() => {
             const search = this.sidenav['searchTerm']().toLowerCase().trim() || '';
             if (!search) {
@@ -253,7 +264,8 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
             }
             // Check if this item's label matches
             return String(this.label()).toLowerCase().includes(search);
-        }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
         // Check if this item has any matching children (for showing the container)
         this.hasMatchingChildren = computed(() => {
             const search = this.sidenav['searchTerm']().toLowerCase().trim() || '';
@@ -261,7 +273,8 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
                 return false;
             }
             return this.childLinks().some((link) => link?.['isVisible']());
-        }, ...(ngDevMode ? [{ debugName: "hasMatchingChildren" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasMatchingChildren" }] : /* istanbul ignore next */ []));
     }
     /**
      * Handle click event on the item
@@ -275,58 +288,39 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
     handleBackClick() {
         this.sidenav.navigateBack();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavItemMobileComponent, isStandalone: true, selector: "df-sidenav-item-mobile", host: { properties: { "class.d-none": "shouldHideComponent() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "mobile" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavItemMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfSidenavItemMobileComponent, isStandalone: true, selector: "df-sidenav-item-mobile", host: { properties: { "class.df-hidden": "shouldHideComponent() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "df-sidenav-mobile" }, usesInheritance: true, ngImport: i0, template: `
     @if (shouldShowMobileHeader()) {
-      <div class="df-sidenav-mobile-header mobile mb-2" role="listitem">
-        <button
-          class="btn w-100 d-flex gap-0 align-items-center justify-content-start df-sidenav-button"
-          (click)="handleBackClick()"
-          [class.df-sidenav-active]="hasActiveChildren()"
-        >
-          <span class="fa-light df-sidenav-mobile-header-back-arrow fa-arrow-left me-4"></span>
+      <div class="df-sidenav-mobile-header df-sidenav-mobile" role="listitem">
+        <button class="df-sidenav-button" (click)="handleBackClick()" [class.df-sidenav-active]="hasActiveChildren()">
+          <df-icon class="fa-light df-sidenav-mobile-header-back-arrow fa-arrow-left" />
           <ng-content select="[dfSidenavIcon]" />
           @if (icon()) {
-            <span class="{{ icon() }}"></span>
+            <df-icon class="{{ icon() }}" />
           }
-          <span class="ms-3 sidenav-label">{{ label() }}</span>
+          <span class="df-sidenav-label">{{ label() }}</span>
         </button>
       </div>
     }
 
     <!-- Regular item button (hidden when it's the active mobile panel) -->
     @if (isVisibleInList()) {
-      <!-- Mobile search: Show as breadcrumb/path (non-clickable) -->
-      @if (isSearching()) {
-        <div class="btn w-100 d-flex gap-3 justify-content-start text-muted disabled pe-none">
-          <ng-content select="[dfSidenavIcon]" />
-          @if (icon()) {
-            <span class="{{ icon() }}"></span>
-          }
-          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
-          <span class="fa-light df-sidenav-collapse-toggle fa-chevron-right ms-auto"></span>
-        </div>
-      } @else {
-        <!-- Regular clickable button -->
-        <button
-          class="btn w-100 d-flex gap-3 justify-content-start df-sidenav-button"
-          (click)="handleItemClick()"
-          [class.df-sidenav-active]="hasActiveChildren()"
-        >
-          <ng-content select="[dfSidenavIcon]" />
-          @if (icon()) {
-            <span class="{{ icon() }}"></span>
-          }
-          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+      <button class="df-sidenav-button" (click)="handleItemClick()" [class.df-sidenav-active]="hasActiveChildren()">
+        <ng-content select="[dfSidenavIcon]" />
+        @if (icon()) {
+          <df-icon class="{{ icon() }}" />
+        }
+        @if (!sidenav.isMinimized()) {
+          <span class="df-sidenav-label" [title]="label()">{{ label() }}</span>
           <!-- Mobile: Show forward arrow for items with children -->
-          <span class="fa-light df-sidenav-collapse-toggle fa-chevron-right ms-auto"></span>
-        </button>
-      }
+          <df-icon class="fa-light df-sidenav-collapse-toggle fa-chevron-right" />
+        }
+      </button>
     }
 
     <!-- Children container - rendered separately from the button -->
     @if (shouldShowChildren()) {
-      <div role="list" class="mobile">
+      <div role="list" class="df-sidenav-mobile">
         <ng-container [ngTemplateOutlet]="content" />
       </div>
     }
@@ -334,64 +328,44 @@ class DfSidenavItemMobileComponent extends DfSidenavItemBaseComponent {
     <ng-template #content>
       <ng-content />
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfIcon, selector: "df-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavItemMobileComponent, decorators: [{
             type: Component,
             args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'df-sidenav-item-mobile',
                     template: `
     @if (shouldShowMobileHeader()) {
-      <div class="df-sidenav-mobile-header mobile mb-2" role="listitem">
-        <button
-          class="btn w-100 d-flex gap-0 align-items-center justify-content-start df-sidenav-button"
-          (click)="handleBackClick()"
-          [class.df-sidenav-active]="hasActiveChildren()"
-        >
-          <span class="fa-light df-sidenav-mobile-header-back-arrow fa-arrow-left me-4"></span>
+      <div class="df-sidenav-mobile-header df-sidenav-mobile" role="listitem">
+        <button class="df-sidenav-button" (click)="handleBackClick()" [class.df-sidenav-active]="hasActiveChildren()">
+          <df-icon class="fa-light df-sidenav-mobile-header-back-arrow fa-arrow-left" />
           <ng-content select="[dfSidenavIcon]" />
           @if (icon()) {
-            <span class="{{ icon() }}"></span>
+            <df-icon class="{{ icon() }}" />
           }
-          <span class="ms-3 sidenav-label">{{ label() }}</span>
+          <span class="df-sidenav-label">{{ label() }}</span>
         </button>
       </div>
     }
 
     <!-- Regular item button (hidden when it's the active mobile panel) -->
     @if (isVisibleInList()) {
-      <!-- Mobile search: Show as breadcrumb/path (non-clickable) -->
-      @if (isSearching()) {
-        <div class="btn w-100 d-flex gap-3 justify-content-start text-muted disabled pe-none">
-          <ng-content select="[dfSidenavIcon]" />
-          @if (icon()) {
-            <span class="{{ icon() }}"></span>
-          }
-          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
-          <span class="fa-light df-sidenav-collapse-toggle fa-chevron-right ms-auto"></span>
-        </div>
-      } @else {
-        <!-- Regular clickable button -->
-        <button
-          class="btn w-100 d-flex gap-3 justify-content-start df-sidenav-button"
-          (click)="handleItemClick()"
-          [class.df-sidenav-active]="hasActiveChildren()"
-        >
-          <ng-content select="[dfSidenavIcon]" />
-          @if (icon()) {
-            <span class="{{ icon() }}"></span>
-          }
-          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+      <button class="df-sidenav-button" (click)="handleItemClick()" [class.df-sidenav-active]="hasActiveChildren()">
+        <ng-content select="[dfSidenavIcon]" />
+        @if (icon()) {
+          <df-icon class="{{ icon() }}" />
+        }
+        @if (!sidenav.isMinimized()) {
+          <span class="df-sidenav-label" [title]="label()">{{ label() }}</span>
           <!-- Mobile: Show forward arrow for items with children -->
-          <span class="fa-light df-sidenav-collapse-toggle fa-chevron-right ms-auto"></span>
-        </button>
-      }
+          <df-icon class="fa-light df-sidenav-collapse-toggle fa-chevron-right" />
+        }
+      </button>
     }
 
     <!-- Children container - rendered separately from the button -->
     @if (shouldShowChildren()) {
-      <div role="list" class="mobile">
+      <div role="list" class="df-sidenav-mobile">
         <ng-container [ngTemplateOutlet]="content" />
       </div>
     }
@@ -401,10 +375,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     </ng-template>
   `,
                     host: {
-                        class: 'mobile',
-                        '[class.d-none]': 'shouldHideComponent() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))'
+                        class: 'df-sidenav-mobile',
+                        '[class.df-hidden]': 'shouldHideComponent() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))'
                     },
-                    imports: [NgTemplateOutlet]
+                    imports: [NgTemplateOutlet, DfIcon]
                 }]
         }] });
 
@@ -417,41 +391,49 @@ class DfSidenavLinkBaseComponent {
         /**
          * The router link path for to the link
          */
-        this.linkPath = input.required(...(ngDevMode ? [{ debugName: "linkPath" }] : []));
+        this.linkPath = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkPath" }] : /* istanbul ignore next */ []));
         /**
          * The label of the link
          */
-        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * The icon class name or inline content (e.g., font awesome class)
          */
-        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.icon = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
          * Whether the wrapper component has icon content (internally used)
          */
-        this.wrapperHasIconContent = input(false, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
+        this.wrapperHasIconContent = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : /* istanbul ignore next */ []));
         /**
          * Explicitly sets the active state of the link. When provided, the link behaves
          * as an external link (plain `<a href>`) and the Angular Router is not used.
          * When `undefined` (default), the active state is determined by the Angular Router.
          */
-        this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
+        this.active = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
         /**
          * Reflects the current active state of the link.
          * Driven by the `active` input when provided, otherwise updated by the router via `(isActiveChange)`.
          */
-        this.isActiveLink = linkedSignal(() => this.active() ?? false, ...(ngDevMode ? [{ debugName: "isActiveLink" }] : []));
+        this.isActiveLink = linkedSignal(() => this.active() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActiveLink" }] : /* istanbul ignore next */ []));
         /**
          * Options to determine when the router link is considered active
          */
-        this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
+        this.routerLinkActiveOptions = input({ exact: false }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
         this.sidenav = inject(DfSidenavComponent);
         this.parentItem = inject(DfSidenavItemComponent, {
             optional: true,
             skipSelf: true
         });
         this.isFirstLevel = this.parentItem === null;
-        this.iconContent = contentChild('dfSidenavIcon', ...(ngDevMode ? [{ debugName: "iconContent" }] : []));
+        this.iconContent = contentChild('dfSidenavIcon', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconContent" }] : /* istanbul ignore next */ []));
         /**
          * Computed signal indicating if the link is visible based on search term
          */
@@ -461,7 +443,8 @@ class DfSidenavLinkBaseComponent {
                 return true;
             }
             return this.label().toLowerCase().includes(search);
-        }, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
     }
     toggleSidenavOnSmallScreen() {
         if (this.sidenav['isSmallScreen']()) {
@@ -469,10 +452,10 @@ class DfSidenavLinkBaseComponent {
         }
         return true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.0", type: DfSidenavLinkBaseComponent, isStandalone: true, inputs: { linkPath: { classPropertyName: "linkPath", publicName: "linkPath", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, wrapperHasIconContent: { classPropertyName: "wrapperHasIconContent", publicName: "wrapperHasIconContent", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconContent", first: true, predicate: ["dfSidenavIcon"], descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavLinkBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.4", type: DfSidenavLinkBaseComponent, isStandalone: true, inputs: { linkPath: { classPropertyName: "linkPath", publicName: "linkPath", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, wrapperHasIconContent: { classPropertyName: "wrapperHasIconContent", publicName: "wrapperHasIconContent", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconContent", first: true, predicate: ["dfSidenavIcon"], descendants: true, isSignal: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkBaseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavLinkBaseComponent, decorators: [{
             type: Directive
         }], propDecorators: { linkPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkPath", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], wrapperHasIconContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperHasIconContent", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], iconContent: [{ type: i0.ContentChild, args: ['dfSidenavIcon', { isSignal: true }] }] } });
 
@@ -485,14 +468,12 @@ class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
         super(...arguments);
         this.anchor = viewChild.required('anchor');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkDesktopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavLinkDesktopComponent, isStandalone: true, selector: "df-sidenav-link-desktop", host: { properties: { "class.d-none": "!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "d-flex" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavLinkDesktopComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfSidenavLinkDesktopComponent, isStandalone: true, selector: "df-sidenav-link-desktop", host: { properties: { "class.df-hidden": "!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" } }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (active() !== undefined) {
       <a
-        class="btn df-sidenav-button d-flex gap-3"
-        [class.w-100]="!sidenav.isMinimized()"
+        class="df-sidenav-button"
         [class.df-sidenav-active-level]="active()"
-        [class.justify-content-start]="!sidenav.isMinimized()"
         [href]="linkPath()"
         target="_blank"
         [attr.aria-label]="label()"
@@ -504,13 +485,11 @@ class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
       </a>
     } @else {
       <a
-        class="btn df-sidenav-button d-flex gap-3"
-        [class.w-100]="!sidenav.isMinimized()"
+        class="df-sidenav-button"
         routerLinkActive="df-sidenav-active-level"
         ariaCurrentWhenActive="page"
         (isActiveChange)="isActiveLink.set($event)"
         [routerLink]="linkPath()"
-        [class.justify-content-start]="!sidenav.isMinimized()"
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
         [attr.aria-label]="label()"
         (click)="toggleSidenavOnSmallScreen()"
@@ -522,26 +501,23 @@ class DfSidenavLinkDesktopComponent extends DfSidenavLinkBaseComponent {
     <ng-template #content>
       <ng-content select="[dfSidenavIcon]" />
       @if (icon()) {
-        <span class="{{ icon() }}"></span>
+        <df-icon class="{{ icon() }}" />
       }
       @if (!sidenav.isMinimized()) {
-        <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+        <span class="df-sidenav-label" [title]="label()">{{ label() }}</span>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfIcon, selector: "df-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkDesktopComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavLinkDesktopComponent, decorators: [{
             type: Component,
             args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'df-sidenav-link-desktop',
                     template: `
     @if (active() !== undefined) {
       <a
-        class="btn df-sidenav-button d-flex gap-3"
-        [class.w-100]="!sidenav.isMinimized()"
+        class="df-sidenav-button"
         [class.df-sidenav-active-level]="active()"
-        [class.justify-content-start]="!sidenav.isMinimized()"
         [href]="linkPath()"
         target="_blank"
         [attr.aria-label]="label()"
@@ -553,13 +529,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       </a>
     } @else {
       <a
-        class="btn df-sidenav-button d-flex gap-3"
-        [class.w-100]="!sidenav.isMinimized()"
+        class="df-sidenav-button"
         routerLinkActive="df-sidenav-active-level"
         ariaCurrentWhenActive="page"
         (isActiveChange)="isActiveLink.set($event)"
         [routerLink]="linkPath()"
-        [class.justify-content-start]="!sidenav.isMinimized()"
         [routerLinkActiveOptions]="routerLinkActiveOptions()"
         [attr.aria-label]="label()"
         (click)="toggleSidenavOnSmallScreen()"
@@ -571,18 +545,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
     <ng-template #content>
       <ng-content select="[dfSidenavIcon]" />
       @if (icon()) {
-        <span class="{{ icon() }}"></span>
+        <df-icon class="{{ icon() }}" />
       }
       @if (!sidenav.isMinimized()) {
-        <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+        <span class="df-sidenav-label" [title]="label()">{{ label() }}</span>
       }
     </ng-template>
   `,
                     host: {
-                        '[class.d-none]': '!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))',
-                        class: 'd-flex'
+                        '[class.df-hidden]': '!isVisible() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))'
                     },
-                    imports: [RouterLink, RouterLinkActive, NgTemplateOutlet]
+                    imports: [RouterLink, RouterLinkActive, NgTemplateOutlet, DfIcon]
                 }]
         }], propDecorators: { anchor: [{ type: i0.ViewChild, args: ['anchor', { isSignal: true }] }] } });
 
@@ -595,8 +568,10 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
         super(...arguments);
         // Inject link wrapper to get parent wrapper reference
         this.linkWrapper = inject(DfSidenavLinkComponent);
-        this.currentMobilePanel = computed(() => this.sidenav['currentMobilePanel']() ?? null, ...(ngDevMode ? [{ debugName: "currentMobilePanel" }] : []));
-        this.isSearching = computed(() => !!this.sidenav['searchTerm']().trim(), ...(ngDevMode ? [{ debugName: "isSearching" }] : []));
+        this.currentMobilePanel = computed(() => this.sidenav['currentMobilePanel']() ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentMobilePanel" }] : /* istanbul ignore next */ []));
+        this.isSearching = computed(() => !!this.sidenav['searchTerm']().trim(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSearching" }] : /* istanbul ignore next */ []));
         this.isVisibleInList = computed(() => {
             const currentPanel = this.currentMobilePanel();
             const parentWrapper = this.linkWrapper['parentWrapper'];
@@ -613,7 +588,8 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
                 // Show links whose parent item wrapper matches the current panel
                 return parentWrapper === currentPanel && this.isVisible();
             }
-        }, ...(ngDevMode ? [{ debugName: "isVisibleInList" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisibleInList" }] : /* istanbul ignore next */ []));
         // Build breadcrumb path for mobile search view
         this.breadcrumbPath = computed(() => {
             const path = [];
@@ -625,13 +601,14 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
                 currentItem = grandParent || null;
             }
             return path;
-        }, ...(ngDevMode ? [{ debugName: "breadcrumbPath" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "breadcrumbPath" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavLinkMobileComponent, isStandalone: true, selector: "df-sidenav-link-mobile", host: { properties: { "class.d-none": "!isVisibleInList() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, classAttribute: "d-flex" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavLinkMobileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfSidenavLinkMobileComponent, isStandalone: true, selector: "df-sidenav-link-mobile", host: { properties: { "class.df-hidden": "!isVisibleInList() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))" }, styleAttribute: "display: flex;" }, usesInheritance: true, ngImport: i0, template: `
     @if (active() !== undefined) {
       <a
-        class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
+        class="df-sidenav-button df-sidenav-breadcrumb-button"
         [class.df-sidenav-active-level]="active()"
         [href]="linkPath()"
         target="_blank"
@@ -642,7 +619,7 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
       </a>
     } @else {
       <a
-        class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
+        class="df-sidenav-button df-sidenav-breadcrumb-button"
         routerLinkActive="df-sidenav-active-level"
         ariaCurrentWhenActive="page"
         (isActiveChange)="isActiveLink.set($event)"
@@ -654,37 +631,36 @@ class DfSidenavLinkMobileComponent extends DfSidenavLinkBaseComponent {
       </a>
     }
     <ng-template #content>
-      <div class="d-flex gap-3 w-100">
-        <ng-content select="[dfSidenavIcon]" />
-        @if (icon()) {
-          <span class="{{ icon() }}"></span>
-        }
-        <div class="d-flex flex-column align-items-start">
-          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+      <ng-content select="[dfSidenavIcon]" />
+      @if (icon()) {
+        <df-icon class="{{ icon() }}" />
+      }
+      @if (!sidenav.isMinimized()) {
+        <div class="df-sidenav-link-content-mobile">
+          <span class="df-sidenav-label" [title]="label()">{{ label() }}</span>
           @if (isSearching() && breadcrumbPath().length > 0) {
-            <small class="d-flex align-items-center gap-1" [class.text-muted]="!active()">
+            <small class="df-sidenav-breadcrumb">
               @for (item of breadcrumbPath(); track $index) {
                 <span>{{ item }}</span>
                 @if (!$last) {
-                  <span class="fa-arrow-right"></span>
+                  <df-icon class="fa-arrow-right" />
                 }
               }
             </small>
           }
         </div>
-      </div>
+      }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DfIcon, selector: "df-icon" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkMobileComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavLinkMobileComponent, decorators: [{
             type: Component,
             args: [{
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'df-sidenav-link-mobile',
                     template: `
     @if (active() !== undefined) {
       <a
-        class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
+        class="df-sidenav-button df-sidenav-breadcrumb-button"
         [class.df-sidenav-active-level]="active()"
         [href]="linkPath()"
         target="_blank"
@@ -695,7 +671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       </a>
     } @else {
       <a
-        class="btn df-sidenav-button d-flex gap-3 justify-content-start w-100 df-sidenav-breadcrumb-button"
+        class="df-sidenav-button df-sidenav-breadcrumb-button"
         routerLinkActive="df-sidenav-active-level"
         ariaCurrentWhenActive="page"
         (isActiveChange)="isActiveLink.set($event)"
@@ -707,32 +683,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       </a>
     }
     <ng-template #content>
-      <div class="d-flex gap-3 w-100">
-        <ng-content select="[dfSidenavIcon]" />
-        @if (icon()) {
-          <span class="{{ icon() }}"></span>
-        }
-        <div class="d-flex flex-column align-items-start">
-          <span class="sidenav-label" [title]="label()">{{ label() }}</span>
+      <ng-content select="[dfSidenavIcon]" />
+      @if (icon()) {
+        <df-icon class="{{ icon() }}" />
+      }
+      @if (!sidenav.isMinimized()) {
+        <div class="df-sidenav-link-content-mobile">
+          <span class="df-sidenav-label" [title]="label()">{{ label() }}</span>
           @if (isSearching() && breadcrumbPath().length > 0) {
-            <small class="d-flex align-items-center gap-1" [class.text-muted]="!active()">
+            <small class="df-sidenav-breadcrumb">
               @for (item of breadcrumbPath(); track $index) {
                 <span>{{ item }}</span>
                 @if (!$last) {
-                  <span class="fa-arrow-right"></span>
+                  <df-icon class="fa-arrow-right" />
                 }
               }
             </small>
           }
         </div>
-      </div>
+      }
     </ng-template>
   `,
                     host: {
-                        '[class.d-none]': '!isVisibleInList() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))',
-                        class: 'd-flex'
+                        '[class.df-hidden]': '!isVisibleInList() || (sidenav.isMinimized() && (!isFirstLevel || !wrapperHasIconContent()))',
+                        style: 'display: flex;'
                     },
-                    imports: [RouterLink, RouterLinkActive, NgTemplateOutlet]
+                    imports: [RouterLink, RouterLinkActive, NgTemplateOutlet, DfIcon]
                 }]
         }] });
 
@@ -743,10 +719,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * @since 21.0.0
  */
 class DfSidenavIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DfSidenavIconDirective, isStandalone: true, selector: "[dfSidenavIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: DfSidenavIconDirective, isStandalone: true, selector: "[dfSidenavIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dfSidenavIcon]'
@@ -762,25 +738,30 @@ class DfSidenavLinkComponent {
         /**
          * The router link path for to the link
          */
-        this.linkPath = input.required(...(ngDevMode ? [{ debugName: "linkPath" }] : []));
+        this.linkPath = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linkPath" }] : /* istanbul ignore next */ []));
         /**
          * The label of the link
          */
-        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * The icon class name or inline content (e.g., font awesome class)
          */
-        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.icon = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
          * Options to determine when the router link is considered active
          */
-        this.routerLinkActiveOptions = input({ exact: false }, ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : []));
+        this.routerLinkActiveOptions = input({ exact: false }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "routerLinkActiveOptions" }] : /* istanbul ignore next */ []));
         /**
          * Explicitly sets the active state of the link. When provided, the link renders as
          * a plain `<a href>` (no Angular Router). When `undefined` (default), the Angular Router determines
          * the active state.
          */
-        this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
+        this.active = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "active" }] : /* istanbul ignore next */ []));
         /**
          * The parent wrapper item component (if any)
          */
@@ -791,17 +772,21 @@ class DfSidenavLinkComponent {
         /**
          * Reference to the desktop link component instance
          */
-        this.desktopInstance = viewChild(DfSidenavLinkDesktopComponent, ...(ngDevMode ? [{ debugName: "desktopInstance" }] : []));
+        this.desktopInstance = viewChild(DfSidenavLinkDesktopComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "desktopInstance" }] : /* istanbul ignore next */ []));
         /**
          * Reference to the mobile link component instance
          */
-        this.mobileInstance = viewChild(DfSidenavLinkMobileComponent, ...(ngDevMode ? [{ debugName: "mobileInstance" }] : []));
-        this.iconContentQuery = contentChild(DfSidenavIconDirective, ...(ngDevMode ? [{ debugName: "iconContentQuery" }] : []));
-        this.wrapperHasIconContent = computed(() => this.icon() !== '' || this.iconContentQuery() !== undefined, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
+        this.mobileInstance = viewChild(DfSidenavLinkMobileComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mobileInstance" }] : /* istanbul ignore next */ []));
+        this.iconContentQuery = contentChild(DfSidenavIconDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconContentQuery" }] : /* istanbul ignore next */ []));
+        this.wrapperHasIconContent = computed(() => this.icon() !== '' || this.iconContentQuery() !== undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : /* istanbul ignore next */ []));
         this.sidenav = inject(DfSidenavComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavLinkComponent, isStandalone: true, selector: "df-sidenav-link", inputs: { linkPath: { classPropertyName: "linkPath", publicName: "linkPath", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.mobile": "sidenav['isMobileDevice']()" }, classAttribute: "d-block" }, queries: [{ propertyName: "iconContentQuery", first: true, predicate: DfSidenavIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "desktopInstance", first: true, predicate: DfSidenavLinkDesktopComponent, descendants: true, isSignal: true }, { propertyName: "mobileInstance", first: true, predicate: DfSidenavLinkMobileComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavLinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfSidenavLinkComponent, isStandalone: true, selector: "df-sidenav-link", inputs: { linkPath: { classPropertyName: "linkPath", publicName: "linkPath", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, routerLinkActiveOptions: { classPropertyName: "routerLinkActiveOptions", publicName: "routerLinkActiveOptions", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, properties: { "class.df-sidenav-mobile": "sidenav['isMobileDevice']()" }, styleAttribute: "display: block;" }, queries: [{ propertyName: "iconContentQuery", first: true, predicate: DfSidenavIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "desktopInstance", first: true, predicate: DfSidenavLinkDesktopComponent, descendants: true, isSignal: true }, { propertyName: "mobileInstance", first: true, predicate: DfSidenavLinkMobileComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #iconSlot>
       <ng-content select="[dfSidenavIcon]" />
     </ng-template>
@@ -834,13 +819,12 @@ class DfSidenavLinkComponent {
         <ng-container [ngTemplateOutlet]="defaultContent" />
       </df-sidenav-link-desktop>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: DfSidenavLinkDesktopComponent, selector: "df-sidenav-link-desktop" }, { kind: "component", type: DfSidenavLinkMobileComponent, selector: "df-sidenav-link-mobile" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: DfSidenavLinkDesktopComponent, selector: "df-sidenav-link-desktop" }, { kind: "component", type: DfSidenavLinkMobileComponent, selector: "df-sidenav-link-mobile" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavLinkComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-sidenav-link',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <ng-template #iconSlot>
       <ng-content select="[dfSidenavIcon]" />
@@ -878,8 +862,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     imports: [DfSidenavLinkDesktopComponent, DfSidenavLinkMobileComponent, NgTemplateOutlet],
                     host: {
                         role: 'listitem',
-                        class: 'd-block',
-                        '[class.mobile]': "sidenav['isMobileDevice']()"
+                        style: 'display: block;',
+                        '[class.df-sidenav-mobile]': "sidenav['isMobileDevice']()"
                     }
                 }]
         }], propDecorators: { linkPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkPath", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], desktopInstance: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavLinkDesktopComponent), { isSignal: true }] }], mobileInstance: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavLinkMobileComponent), { isSignal: true }] }], iconContentQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfSidenavIconDirective), { isSignal: true }] }] } });
@@ -893,16 +877,19 @@ class DfSidenavItemComponent {
         /**
          * Label of the sidenav item
          */
-        this.label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.label = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
         /**
          * Flag whether the sidenav item is collapsed
-         * @default false
+         * @defaultValue `false`
          */
-        this.collapsed = model(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+        this.collapsed = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
         /**
          * Optional icon class for the sidenav item
          */
-        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.icon = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
         /**
          * Reference to the parent element containing this item
          */
@@ -913,25 +900,29 @@ class DfSidenavItemComponent {
         /**
          * Child sidenav items nested inside this item
          */
-        this.childrenItems = contentChildren(DfSidenavItemComponent, { ...(ngDevMode ? { debugName: "childrenItems" } : {}), descendants: true });
+        this.childrenItems = contentChildren(DfSidenavItemComponent, { ...(ngDevMode ? { debugName: "childrenItems" } : /* istanbul ignore next */ {}), descendants: true });
         /**
          * Child sidenav links nested inside this item
          */
-        this.childrenLinks = contentChildren(DfSidenavLinkComponent, { ...(ngDevMode ? { debugName: "childrenLinks" } : {}), descendants: true });
+        this.childrenLinks = contentChildren(DfSidenavLinkComponent, { ...(ngDevMode ? { debugName: "childrenLinks" } : /* istanbul ignore next */ {}), descendants: true });
         /**
          * Reference to the desktop instance of the sidenav item
          */
-        this.desktopInstance = viewChild(DfSidenavItemDesktopComponent, ...(ngDevMode ? [{ debugName: "desktopInstance" }] : []));
+        this.desktopInstance = viewChild(DfSidenavItemDesktopComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "desktopInstance" }] : /* istanbul ignore next */ []));
         /**
          * Reference to the mobile instance of the sidenav item
          */
-        this.mobileInstance = viewChild(DfSidenavItemMobileComponent, ...(ngDevMode ? [{ debugName: "mobileInstance" }] : []));
-        this.iconContentQuery = contentChild(DfSidenavIconDirective, ...(ngDevMode ? [{ debugName: "iconContentQuery" }] : []));
-        this.wrapperHasIconContent = computed(() => this.icon() !== '' || this.iconContentQuery() !== undefined, ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : []));
+        this.mobileInstance = viewChild(DfSidenavItemMobileComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mobileInstance" }] : /* istanbul ignore next */ []));
+        this.iconContentQuery = contentChild(DfSidenavIconDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "iconContentQuery" }] : /* istanbul ignore next */ []));
+        this.wrapperHasIconContent = computed(() => this.icon() !== '' || this.iconContentQuery() !== undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wrapperHasIconContent" }] : /* istanbul ignore next */ []));
         this.sidenav = inject(DfSidenavComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavItemComponent, isStandalone: true, selector: "df-sidenav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { attributes: { "role": "listitem" }, properties: { "class.mobile": "sidenav['isMobileDevice']()" }, classAttribute: "d-block" }, queries: [{ propertyName: "childrenItems", predicate: DfSidenavItemComponent, descendants: true, isSignal: true }, { propertyName: "childrenLinks", predicate: DfSidenavLinkComponent, descendants: true, isSignal: true }, { propertyName: "iconContentQuery", first: true, predicate: DfSidenavIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "desktopInstance", first: true, predicate: DfSidenavItemDesktopComponent, descendants: true, isSignal: true }, { propertyName: "mobileInstance", first: true, predicate: DfSidenavItemMobileComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfSidenavItemComponent, isStandalone: true, selector: "df-sidenav-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange" }, host: { attributes: { "role": "listitem" }, properties: { "class.df-sidenav-mobile": "sidenav['isMobileDevice']()" }, styleAttribute: "display: block;" }, queries: [{ propertyName: "childrenItems", predicate: DfSidenavItemComponent, descendants: true, isSignal: true }, { propertyName: "childrenLinks", predicate: DfSidenavLinkComponent, descendants: true, isSignal: true }, { propertyName: "iconContentQuery", first: true, predicate: DfSidenavIconDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "desktopInstance", first: true, predicate: DfSidenavItemDesktopComponent, descendants: true, isSignal: true }, { propertyName: "mobileInstance", first: true, predicate: DfSidenavItemMobileComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #iconSlot>
       <ng-content select="[dfSidenavIcon]" />
     </ng-template>
@@ -960,13 +951,12 @@ class DfSidenavItemComponent {
         <ng-container [ngTemplateOutlet]="content" />
       </df-sidenav-item-desktop>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: DfSidenavItemDesktopComponent, selector: "df-sidenav-item-desktop" }, { kind: "component", type: DfSidenavItemMobileComponent, selector: "df-sidenav-item-mobile" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: DfSidenavItemDesktopComponent, selector: "df-sidenav-item-desktop" }, { kind: "component", type: DfSidenavItemMobileComponent, selector: "df-sidenav-item-mobile" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'df-sidenav-item',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <ng-template #iconSlot>
       <ng-content select="[dfSidenavIcon]" />
@@ -1000,8 +990,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                     imports: [DfSidenavItemDesktopComponent, DfSidenavItemMobileComponent, NgTemplateOutlet],
                     host: {
                         role: 'listitem',
-                        class: 'd-block',
-                        '[class.mobile]': "sidenav['isMobileDevice']()"
+                        style: 'display: block;',
+                        '[class.df-sidenav-mobile]': "sidenav['isMobileDevice']()"
                     }
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], childrenItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavItemComponent), { ...{ descendants: true }, isSignal: true }] }], childrenLinks: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavLinkComponent), { ...{ descendants: true }, isSignal: true }] }], desktopInstance: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavItemDesktopComponent), { isSignal: true }] }], mobileInstance: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavItemMobileComponent), { isSignal: true }] }], iconContentQuery: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DfSidenavIconDirective), { isSignal: true }] }] } });
@@ -1023,30 +1013,30 @@ class DfSidenavComponent {
     constructor() {
         /**
          * Flag whether the sidenav includes a search input
-         * @default true
+         * @defaultValue `true`
          */
-        this.searchable = input(true, { ...(ngDevMode ? { debugName: "searchable" } : {}), transform: booleanAttribute });
+        this.searchable = input(true, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Flag whether the sidenav should be resizable
-         * @default true
+         * @defaultValue `true`
          */
-        this.resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : {}), transform: booleanAttribute });
+        this.resizable = input(true, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Flag whether the sidenav should have the collapse button
-         * @default true
+         * @defaultValue `true`
          */
-        this.collapsible = input(true, { ...(ngDevMode ? { debugName: "collapsible" } : {}), transform: booleanAttribute });
+        this.collapsible = input(true, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * Flag to enable the mobile sidenav display of the items.
-         * @default true
+         * @defaultValue `true`
          */
-        this.enableMobile = input(true, { ...(ngDevMode ? { debugName: "enableMobile" } : {}), transform: booleanAttribute });
+        this.enableMobile = input(true, { ...(ngDevMode ? { debugName: "enableMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @since 21.1.0
-         *
          * Flag to disable the automatic scroll to active link on desktop when the sidenav is initialized.
+         *
+         * @since 21.1.0
          */
-        this.disableInitialDesktopAutoScroll = input(false, { ...(ngDevMode ? { debugName: "disableInitialDesktopAutoScroll" } : {}), transform: booleanAttribute });
+        this.disableInitialDesktopAutoScroll = input(false, { ...(ngDevMode ? { debugName: "disableInitialDesktopAutoScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this._isMinimized = linkedSignal(() => {
             // in mobile devices, the default value is true (hiding the drawer) and does not track changes to the screen size
             if (this.isMobileDevice()) {
@@ -1054,12 +1044,14 @@ class DfSidenavComponent {
             }
             // in desktop, we track the large screen signal in order to reset the minimized state
             // it allows resizing the window and have a more user-friendly behavior
-            return !this.isLargeUpScreen();
-        }, ...(ngDevMode ? [{ debugName: "_isMinimized" }] : []));
+            return !this.isLargeUpScreen() && this.collapsible();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_isMinimized" }] : /* istanbul ignore next */ []));
         /**
          * Flag to indicate if the sidenav is minimized
          */
-        this.isMinimized = computed(() => this._isMinimized(), ...(ngDevMode ? [{ debugName: "isMinimized" }] : []));
+        this.isMinimized = computed(() => this._isMinimized(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMinimized" }] : /* istanbul ignore next */ []));
         this.hostRef = inject((ElementRef));
         this.scrollableContainer = viewChild.required('scrollableContainer');
         this.isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
@@ -1081,28 +1073,38 @@ class DfSidenavComponent {
                 }
                 return false;
             }
-        }, ...(ngDevMode ? [{ debugName: "isMobileDevice" }] : []));
-        this.searchInput = viewChild('textInput', ...(ngDevMode ? [{ debugName: "searchInput" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMobileDevice" }] : /* istanbul ignore next */ []));
+        this.searchInput = viewChild('textInput', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchInput" }] : /* istanbul ignore next */ []));
         // Query all links to find active ones
-        this.allLinks = contentChildren(DfSidenavLinkComponent, { ...(ngDevMode ? { debugName: "allLinks" } : {}), descendants: true });
-        this.allItems = contentChildren(DfSidenavItemComponent, { ...(ngDevMode ? { debugName: "allItems" } : {}), descendants: true });
-        this.width = signal(null, ...(ngDevMode ? [{ debugName: "width" }] : []));
+        this.allLinks = contentChildren(DfSidenavLinkComponent, { ...(ngDevMode ? { debugName: "allLinks" } : /* istanbul ignore next */ {}), descendants: true });
+        this.allItems = contentChildren(DfSidenavItemComponent, { ...(ngDevMode ? { debugName: "allItems" } : /* istanbul ignore next */ {}), descendants: true });
+        this.width = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
         this.savedWidth = null;
-        this.searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+        this.searchTerm = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+        this.searchTermFormField = form(this.searchTerm);
         // Mobile navigation stack - tracks which item's children are currently displayed
         // Using component references instead of labels for uniqueness
-        this.mobileNavigationStack = signal([], ...(ngDevMode ? [{ debugName: "mobileNavigationStack" }] : []));
+        this.mobileNavigationStack = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mobileNavigationStack" }] : /* istanbul ignore next */ []));
         this.currentMobilePanel = computed(() => {
             const stack = this.mobileNavigationStack();
             return stack.length > 0 ? stack[stack.length - 1] : null;
-        }, ...(ngDevMode ? [{ debugName: "currentMobilePanel" }] : []));
-        this.isMd = toAngularSignal(md$);
-        this.isLg = toAngularSignal(lg$);
-        this.isSmallScreen = computed(() => !this.isMd(), ...(ngDevMode ? [{ debugName: "isSmallScreen" }] : []));
-        this.isMediumScreen = computed(() => this.isMd() && !this.isLg(), ...(ngDevMode ? [{ debugName: "isMediumScreen" }] : []));
-        this.isLargeUpScreen = computed(() => this.isLg(), ...(ngDevMode ? [{ debugName: "isLargeUpScreen" }] : []));
-        this.isMobileOrSmallScreen = computed(() => this.isSmallScreen() || this.isMediumScreen(), ...(ngDevMode ? [{ debugName: "isMobileOrSmallScreen" }] : []));
-        this.backdrop = computed(() => this.isMediumScreen(), ...(ngDevMode ? [{ debugName: "backdrop" }] : []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentMobilePanel" }] : /* istanbul ignore next */ []));
+        this.isSm = trackWindow('sm');
+        this.isLg = trackWindow('lg');
+        this.isSmallScreen = computed(() => !this.isSm() && !this.isLg(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSmallScreen" }] : /* istanbul ignore next */ []));
+        this.isMediumScreen = computed(() => this.isSm() && !this.isLg(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMediumScreen" }] : /* istanbul ignore next */ []));
+        this.isLargeUpScreen = computed(() => this.isLg(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLargeUpScreen" }] : /* istanbul ignore next */ []));
+        this.backdrop = computed(() => this.isMediumScreen(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
         this.navManager = createNavManager();
         this.navManagerConfig = {
             selector: (node) => node.querySelectorAll('input, button, a'),
@@ -1112,12 +1114,19 @@ class DfSidenavComponent {
             }
         };
         this.injector = inject(Injector);
+        // internal flag to allow mobile screen navigation to non-active item when minimized
+        this.skipActiveItemNavigation = linkedSignal(() => {
+            this.isMinimized();
+            return false;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "skipActiveItemNavigation" }] : /* istanbul ignore next */ []));
         this.contentHasIcons = computed(() => this.allItems().some((item) => item['wrapperHasIconContent']()) ||
-            this.allLinks().some((link) => link['wrapperHasIconContent']()), ...(ngDevMode ? [{ debugName: "contentHasIcons" }] : []));
+            this.allLinks().some((link) => link['wrapperHasIconContent']()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentHasIcons" }] : /* istanbul ignore next */ []));
         useDirectiveForHost(this.navManager.directive, this.navManagerConfig);
         afterRenderEffect(() => {
             if (this.isBrowser) {
-                if (this.isMobileDevice() && !this._isMinimized()) {
+                if (this.isMobileDevice() && !this._isMinimized() && !this.skipActiveItemNavigation()) {
                     // Delay to ensure DOM and contentChildren queries are ready
                     this.navigateToActiveItem();
                 }
@@ -1168,7 +1177,7 @@ class DfSidenavComponent {
                     }, { injector: this.injector });
                 });
             }
-        }, { ...(ngDevMode ? { debugName: "effectRef" } : {}), injector: this.injector });
+        }, { ...(ngDevMode ? { debugName: "effectRef" } : /* istanbul ignore next */ {}), injector: this.injector });
     }
     /**
      * Toggles the minimized state of the sidenav
@@ -1180,6 +1189,8 @@ class DfSidenavComponent {
         if (minimized) {
             this.savedWidth = this.width();
             this.width.set(0);
+            // reset mobile navigation stack to show root level icons (if any)
+            this.mobileNavigationStack.set([]);
         }
         else {
             this.width.set(this.savedWidth);
@@ -1193,6 +1204,8 @@ class DfSidenavComponent {
      */
     visibleChangeHandler(isVisible) {
         if (!isVisible) {
+            // reset mobile navigation stack to show root level icons (if any)
+            this.mobileNavigationStack.set([]);
             this.width.set(0);
         }
         this._isMinimized.set(!isVisible);
@@ -1215,6 +1228,12 @@ class DfSidenavComponent {
             }
         }
     }
+    onMinimizedChange(isMinimized) {
+        if (isMinimized) {
+            this.mobileNavigationStack.set([]);
+        }
+        this._isMinimized.set(isMinimized);
+    }
     // utility to transfer focus from the button when minimized to the search input when uncollapsed
     focusSearch() {
         this.toggleMinimize(false);
@@ -1227,6 +1246,10 @@ class DfSidenavComponent {
      * @param itemRef item to be added to the navigation stack
      */
     navigateToChildren(itemRef) {
+        if (this.isMinimized()) {
+            this.toggleMinimize(false);
+            this.skipActiveItemNavigation.set(true);
+        }
         const stack = this.mobileNavigationStack();
         this.mobileNavigationStack.set([...stack, itemRef]);
     }
@@ -1265,15 +1288,15 @@ class DfSidenavComponent {
             this.mobileNavigationStack.set([]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: DfSidenavComponent, isStandalone: true, selector: "df-sidenav", inputs: { searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null }, disableInitialDesktopAutoScroll: { classPropertyName: "disableInitialDesktopAutoScroll", publicName: "disableInitialDesktopAutoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.df-sidenav-lg": "isLargeUpScreen()", "class.df-sidenav-withicon": "contentHasIcons()", "class.d-none": "isSmallScreen() && _isMinimized()", "class.df-sidenav-drawer": "isMediumScreen() && !_isMinimized()" }, classAttribute: "df-sidenav" }, queries: [{ propertyName: "allLinks", predicate: DfSidenavLinkComponent, descendants: true, isSignal: true }, { propertyName: "allItems", predicate: DfSidenavItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfSidenavComponent, isStandalone: true, selector: "df-sidenav", inputs: { searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null }, disableInitialDesktopAutoScroll: { classPropertyName: "disableInitialDesktopAutoScroll", publicName: "disableInitialDesktopAutoScroll", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.df-sidenav-lg": "isLargeUpScreen()", "class.df-sidenav-withicon": "contentHasIcons()", "class.df-hidden": "!isLargeUpScreen() && _isMinimized()", "class.df-sidenav-drawer": "isMediumScreen() && !_isMinimized()", "class.df-sidenav-minimized": "isMinimized()" }, classAttribute: "df-sidenav" }, queries: [{ propertyName: "allLinks", predicate: DfSidenavLinkComponent, descendants: true, isSignal: true }, { propertyName: "allItems", predicate: DfSidenavItemComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "scrollableContainer", first: true, predicate: ["scrollableContainer"], descendants: true, isSignal: true }, { propertyName: "searchInput", first: true, predicate: ["textInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <df-drawer
       #drawer
       position="inline-start"
       [className]="isSmallScreen() ? 'df-sidenav-mobile-drawer' : ''"
       [visible]="!_isMinimized()"
       (visibleChange)="visibleChangeHandler($event)"
-      (minimizedChange)="_isMinimized.set($event)"
+      (minimizedChange)="onMinimizedChange($event)"
       (resizingChange)="resizingChangeHandler($event)"
       [bodyScroll]="true"
       [backdrop]="backdrop()"
@@ -1282,84 +1305,82 @@ class DfSidenavComponent {
       [container]="isSmallScreen() ? null : hostRef.nativeElement"
       [resizable]="resizable() && !isSmallScreen()"
       [focusOnInit]="false"
-      [configuration]="isLargeUpScreen() ? 'inline' : 'overlay'"
+      [configuration]="isLargeUpScreen() || (isMediumScreen() && !collapsible()) ? 'inline' : 'overlay'"
     >
-      <div class="h-100 w-100">
-        <nav class="d-flex flex-column w-100 h-100 p-5 pb-3">
-          <div class="df-sidenav-header flex-shrink-0" [class.df-sidenav-header-minimized]="_isMinimized()">
-            @if (searchable()) {
-              @if (_isMinimized()) {
-                <button
-                  class="btn btn-outline-neutral df-btn-icononly mb-3 w-100 fa-search"
-                  [class.df-sidenav-search-minimized]="!contentHasIcons()"
-                  type="button"
-                  (click)="focusSearch()"
+      <nav class="df-sidenav-container">
+        @if (searchable()) {
+          <div class="df-sidenav-header" [class.df-sidenav-header-minimized]="_isMinimized()">
+            @if (_isMinimized()) {
+              <button
+                dfIconButton
+                appearance="outline"
+                variant="neutral"
+                class="df-sidenav-search-minimized fa-light fa-search"
+                [class.df-sidenav-search-minimized-no-icons]="!contentHasIcons()"
+                (click)="focusSearch()"
+                i18n-aria-label="@@df.sidenav.search.ariaLabel"
+                aria-label="Search"
+              ></button>
+            } @else {
+              <div class="input-group">
+                <div class="input-group-prepend">
+                  <df-icon class="input-group-text fa-light fa-search" />
+                </div>
+                <input
+                  type="search"
+                  class="form-control df-input-withicon"
+                  i18n-placeholder="@@df.sidenav.search.placeholder"
+                  placeholder="Search"
                   i18n-aria-label="@@df.sidenav.search.ariaLabel"
                   aria-label="Search"
-                ></button>
-              } @else {
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text fa-light fa-search"></span>
-                  </div>
-                  <input
-                    type="search"
-                    class="form-control df-input-withicon"
-                    i18n-placeholder="@@df.sidenav.search.placeholder"
-                    placeholder="Search"
-                    i18n-aria-label="@@df.sidenav.search.ariaLabel"
-                    aria-label="Search"
-                    [(ngModel)]="searchTerm"
-                    #textInput
-                  />
-                  <div class="input-group-append">
-                    <button
-                      class="input-group-text fa-light fa-times"
-                      [class.df-sidenav-search-empty]="searchTerm() === ''"
-                      (click)="searchTerm.set(''); textInput.focus()"
-                    >
-                      <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
-                    </button>
-                  </div>
+                  [formField]="searchTermFormField"
+                  #textInput
+                />
+                <div class="input-group-append">
+                  <button
+                    class="input-group-text fa-light fa-times"
+                    [class.df-sidenav-search-empty]="searchTerm() === ''"
+                    (click)="searchTerm.set(''); textInput.focus(); $event.preventDefault()"
+                  >
+                    <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
+                  </button>
                 </div>
-              }
+              </div>
             }
           </div>
+        }
 
-          <div role="list" class="sidenav-body flex-grow-1 overflow-y-auto" #scrollableContainer>
-            <ng-content />
+        <div role="list" class="df-sidenav-body" #scrollableContainer>
+          <ng-content />
+        </div>
+        @if (collapsible() && !isSmallScreen()) {
+          <div class="df-sidenav-footer">
+            <button
+              dfIconButton
+              class="df-sidenav-toggle-minimized"
+              [class.fa-arrow-right-to-line]="isMinimized()"
+              [class.fa-arrow-left-to-line]="!isMinimized()"
+              appearance="outline"
+              (click)="toggleMinimize()"
+              i18n-aria-label="@@df.sidenav.toggleMinimize.ariaLabel"
+              aria-label="Toggle minimized sidenav"
+            ></button>
           </div>
-          @if (collapsible() && !isSmallScreen()) {
-            <div class="d-flex sidenav-footer flex-shrink-0 py-3">
-              <button
-                class="btn btn-outline-primary df-btn-icononly df-sidenav-toggle-minimized"
-                (click)="toggleMinimize()"
-                i18n-aria-label="@@df.sidenav.toggleMinimize.ariaLabel"
-                aria-label="Toggle minimized sidenav"
-              >
-                @if (isMinimized()) {
-                  <span class="fa-arrow-right-to-line"></span>
-                } @else {
-                  <span class="fa-arrow-left-to-line"></span>
-                }
-              </button>
-            </div>
-          }
-        </nav>
-      </div>
+        }
+      </nav>
     </df-drawer>
-  `, isInline: true, styles: [".df-sidenav{position:relative;--sidenav-minWidth: 44px;width:var(--sidenav-minWidth)}.df-sidenav.df-sidenav-withicon{--sidenav-minWidth: 90px}.df-sidenav.df-sidenav-lg{width:auto}.df-sidenav.df-sidenav-lg .df-drawer{--df-drawer-size: max-content}.df-sidenav.df-sidenav-light-sky .sidenav-body{scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-primary-subtle-background)}.df-sidenav.df-sidenav-light-sky .df-drawer,.df-sidenav.df-sidenav-light-sky .df-sidenav-button{background-color:var(--df-color-primary-subtle-background)}.df-sidenav .df-sidenav-search-empty{visibility:hidden}.df-sidenav .df-sidenav-mobile-drawer{top:var(--df-navbar-height, 56px)!important;height:calc(100vh - var(--df-navbar-height, 56px))!important}.df-sidenav nav{border-inline-end:1px solid var(--df-color-inert-neutral-main-border)}.df-sidenav.df-sidenav-drawer .df-drawer{z-index:2010}.df-sidenav .df-drawer{background-color:var(--df-color-inert-neutral-main-background);height:100%;--df-drawer-size: 0;--df-drawer-min-size: var(--sidenav-minWidth);--df-drawer-max-size: max-content;z-index:10;transition:none}.df-sidenav .df-drawer.df-inline-start{border:none}.df-sidenav .df-drawer.df-collapse-show{--df-drawer-size: max-content}.df-sidenav .df-drawer.df-collapse-hide{display:block}.df-sidenav .df-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-sidenav .df-sidenav-active{font-weight:var(--df-typo-weight-bold)}.df-sidenav .sidenav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.df-sidenav .sidenav-label:before{content:attr(title);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-sidenav .df-sidenav-mobile-header{padding-block-end:var(--df-spacing-2);border-block-end:1px solid var(--df-color-neutral-alt-default-border);font-weight:var(--df-typo-weight-regular)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-active .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .sidenav-body{padding:var(--df-spacing-2);scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-sidenav .df-sidenav-search-minimized,.df-sidenav .df-sidenav-toggle-minimized{min-width:36px;position:relative;z-index:1}.df-sidenav .df-sidenav-header{padding-inline:var(--df-spacing-2);overflow:visible;position:relative}.df-sidenav .df-sidenav-header.df-sidenav-header-minimized{padding-inline:0}.df-sidenav .sidenav-footer{overflow:visible;position:relative}.df-sidenav [role=list] [role=listitem]{padding-inline-start:0}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile){padding-inline-start:var(--df-spacing-6);position:relative}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile):before{content:\"\";position:absolute;left:var(--df-spacing-5);top:0;bottom:0;width:1px;background-color:var(--df-color-neutral-soft-default-background)}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile) [role=listitem]:not(.mobile){padding-inline-start:var(--df-spacing-6)}.df-sidenav .df-drawer-splitter{position:absolute;inset-block:0;inset-inline-end:-4px;width:1rem;cursor:ew-resize;background:transparent;display:flex;align-items:center;justify-content:center;touch-action:none}.df-sidenav .df-drawer-splitter .df-drawer-splitter-handle{--df-btn-bg: transparent;flex-shrink:0;transform:translate(40%);border:none;cursor:ew-resize}.df-sidenav .df-sidenav-button{--df-box-shadow-color: var(--df-color-focus-main-border);--df-btn-font-weight: var(--df-typo-weight-regular);background-color:var(--df-color-inert-neutral-main-background);padding-inline:var(--df-spacing-5);margin-block-end:1px;height:40px;border:none;position:relative}.df-sidenav .df-sidenav-button:focus-visible{z-index:1}.df-sidenav .df-sidenav-button.df-sidenav-breadcrumb-button{height:3rem}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{transition:transform .3s;color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle.expanded{transform:rotate(180deg)}.df-sidenav .df-sidenav-button:hover{background-color:var(--df-color-primary-alt-hovered-background)}.df-sidenav .df-sidenav-button:hover .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-hovered-foreground)}.df-sidenav .df-sidenav-button:active{background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button:active .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .df-sidenav-button.df-sidenav-active-level{font-weight:var(--df-typo-weight-bold);background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button.df-sidenav-active-level:hover{background-color:var(--df-color-primary-alt-activeHovered-background)}.df-sidenav .df-sidenav-item-hidden{visibility:hidden;height:0}.df-sidenav .input-group.df-input-prepend .input-group-prepend{padding-inline-start:15px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DfDrawer, selector: "df-drawer", inputs: ["className", "bodyScroll", "backdrop", "container", "size", "resizable", "visible", "keepInDom", "configuration", "position", "focusOnInit"], outputs: ["sizeChange", "visibleChange", "minimizedChange", "maximizedChange", "resizingChange", "minSize", "maxSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: [".df-sidenav{position:relative;--sidenav-minWidth: 44px;width:var(--sidenav-minWidth)}.df-sidenav.df-sidenav-withicon{--sidenav-minWidth: 80px}.df-sidenav.df-sidenav-lg{width:auto}.df-sidenav.df-sidenav-lg .df-drawer{--df-drawer-size: max-content}.df-sidenav.df-sidenav-light-sky .df-sidenav-body{scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-primary-subtle-background)}.df-sidenav.df-sidenav-light-sky .df-drawer,.df-sidenav.df-sidenav-light-sky .df-sidenav-button{background-color:var(--df-color-primary-subtle-background)}.df-sidenav .df-sidenav-search-empty{visibility:hidden}.df-sidenav .df-sidenav-mobile-drawer{top:var(--df-navbar-height, 56px)!important;height:calc(100vh - var(--df-navbar-height, 56px))!important}.df-sidenav nav{border-inline-end:1px solid var(--df-color-inert-neutral-main-border)}.df-sidenav.df-sidenav-drawer .df-drawer{z-index:2010}.df-sidenav .df-sidenav-container{display:flex;flex-direction:column;height:100%;padding:var(--df-spacing-5);padding-block-end:var(--df-spacing-3)}.df-sidenav .df-sidenav-link-content-mobile{display:flex;flex-direction:column;align-items:flex-start}.df-sidenav .df-sidenav-link-content-mobile .df-sidenav-breadcrumb{color:var(--df-color-subtext-foreground);display:flex;gap:var(--df-spacing-1)}.df-sidenav .df-drawer{background-color:var(--df-color-inert-neutral-main-background);height:100%;--df-drawer-size: 0;--df-drawer-min-size: var(--sidenav-minWidth);--df-drawer-max-size: max-content;z-index:10;transition:none}.df-sidenav .df-drawer.df-inline-start{border:none}.df-sidenav .df-drawer.df-collapse-show{--df-drawer-size: max-content}.df-sidenav .df-drawer.df-collapse-hide{display:block}.df-sidenav .df-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-sidenav .df-sidenav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.df-sidenav .df-sidenav-label:before{content:attr(title);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-sidenav .df-sidenav-mobile-header{padding-block-end:var(--df-spacing-2);border-block-end:1px solid var(--df-color-neutral-alt-default-border);margin-block-end:var(--df-spacing-2);font-weight:var(--df-typo-weight-regular)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-button{gap:0}.df-sidenav .df-sidenav-mobile-header .df-sidenav-mobile-header-back-arrow{margin-inline-end:var(--df-spacing-4);color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-active .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-label{margin-inline-start:var(--df-spacing-3)}.df-sidenav.df-sidenav-minimized .df-sidenav-button{width:3rem}.df-sidenav.df-sidenav-minimized .df-sidenav-body{padding:0;overflow:visible}.df-sidenav .df-sidenav-body{padding:var(--df-spacing-2);scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background);flex-grow:1;overflow-y:auto}.df-sidenav .df-sidenav-search-minimized{width:100%}.df-sidenav .df-sidenav-search-minimized-no-icons,.df-sidenav .df-sidenav-toggle-minimized{min-width:36px;position:relative;z-index:1}.df-sidenav .df-sidenav-header{margin-block-end:var(--df-spacing-3);overflow:visible;padding-inline:var(--df-spacing-2);position:relative}.df-sidenav .df-sidenav-header .input-group{flex-wrap:nowrap}.df-sidenav .df-sidenav-header.df-sidenav-header-minimized{padding-inline:0}.df-sidenav .df-sidenav-footer{overflow:visible;position:relative;padding-block:var(--df-spacing-3)}.df-sidenav [role=list] [role=listitem]{padding-inline-start:0}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.df-sidenav-mobile){padding-inline-start:var(--df-spacing-6);position:relative}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.df-sidenav-mobile):before{content:\"\";position:absolute;inset-inline-start:var(--df-spacing-5);top:0;bottom:0;width:1px;background-color:var(--df-color-neutral-soft-default-background)}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.df-sidenav-mobile) [role=listitem]:not(.df-sidenav-mobile){padding-inline-start:var(--df-spacing-6)}.df-sidenav .df-sidenav-button{align-items:center;border-radius:var(--df-borderRadius-main-medium);background-color:var(--df-color-inert-neutral-main-background);box-shadow:none;border:none;cursor:pointer;color:var(--df-color-neutral-alt-default-foreground);display:flex;font-weight:var(--df-typo-weight-regular);gap:var(--df-spacing-3);height:2.5rem;justify-content:start;margin-block-end:1px;padding-inline:var(--df-spacing-5);position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;user-select:none;width:100%}.df-sidenav .df-sidenav-button.df-sidenav-active{font-weight:var(--df-typo-weight-bold)}.df-sidenav .df-sidenav-button:focus-visible{z-index:1;outline:2px solid var(--df-color-focus-main-border);outline-offset:2px}.df-sidenav .df-sidenav-button.df-sidenav-breadcrumb-button{height:3rem}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{transition:transform .3s}@media(prefers-reduced-motion:reduce){.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{transition:none}}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-default-foreground);margin-inline-start:auto}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle.expanded{transform:rotate(180deg)}.df-sidenav .df-sidenav-button:hover{background-color:var(--df-color-primary-alt-hovered-background);color:var(--df-color-neutral-alt-hovered-foreground)}.df-sidenav .df-sidenav-button:hover .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-hovered-foreground)}.df-sidenav .df-sidenav-button:active{background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button:active .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .df-sidenav-button.df-sidenav-active-level{font-weight:var(--df-typo-weight-bold);background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button.df-sidenav-active-level:hover{background-color:var(--df-color-primary-alt-activeHovered-background)}.df-sidenav .df-sidenav-item-hidden{visibility:hidden;height:0;overflow:hidden}.df-sidenav .input-group.df-input-prepend .input-group-prepend{padding-inline-start:15px}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: DfDrawer, selector: "df-drawer", inputs: ["className", "bodyScroll", "backdrop", "closeOnBackdropClick", "container", "size", "resizable", "visible", "keepInDom", "configuration", "position", "focusOnInit"], outputs: ["sizeChange", "visibleChange", "minimizedChange", "maximizedChange", "resizingChange", "minSize", "maxSize"] }, { kind: "component", type: DfIcon, selector: "df-icon" }, { kind: "component", type: DfIconButton, selector: "button[dfIconButton], a[dfIconButton]" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DfSidenavComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'df-sidenav', template: `
+            args: [{ selector: 'df-sidenav', template: `
     <df-drawer
       #drawer
       position="inline-start"
       [className]="isSmallScreen() ? 'df-sidenav-mobile-drawer' : ''"
       [visible]="!_isMinimized()"
       (visibleChange)="visibleChangeHandler($event)"
-      (minimizedChange)="_isMinimized.set($event)"
+      (minimizedChange)="onMinimizedChange($event)"
       (resizingChange)="resizingChangeHandler($event)"
       [bodyScroll]="true"
       [backdrop]="backdrop()"
@@ -1368,84 +1389,314 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
       [container]="isSmallScreen() ? null : hostRef.nativeElement"
       [resizable]="resizable() && !isSmallScreen()"
       [focusOnInit]="false"
-      [configuration]="isLargeUpScreen() ? 'inline' : 'overlay'"
+      [configuration]="isLargeUpScreen() || (isMediumScreen() && !collapsible()) ? 'inline' : 'overlay'"
     >
-      <div class="h-100 w-100">
-        <nav class="d-flex flex-column w-100 h-100 p-5 pb-3">
-          <div class="df-sidenav-header flex-shrink-0" [class.df-sidenav-header-minimized]="_isMinimized()">
-            @if (searchable()) {
-              @if (_isMinimized()) {
-                <button
-                  class="btn btn-outline-neutral df-btn-icononly mb-3 w-100 fa-search"
-                  [class.df-sidenav-search-minimized]="!contentHasIcons()"
-                  type="button"
-                  (click)="focusSearch()"
+      <nav class="df-sidenav-container">
+        @if (searchable()) {
+          <div class="df-sidenav-header" [class.df-sidenav-header-minimized]="_isMinimized()">
+            @if (_isMinimized()) {
+              <button
+                dfIconButton
+                appearance="outline"
+                variant="neutral"
+                class="df-sidenav-search-minimized fa-light fa-search"
+                [class.df-sidenav-search-minimized-no-icons]="!contentHasIcons()"
+                (click)="focusSearch()"
+                i18n-aria-label="@@df.sidenav.search.ariaLabel"
+                aria-label="Search"
+              ></button>
+            } @else {
+              <div class="input-group">
+                <div class="input-group-prepend">
+                  <df-icon class="input-group-text fa-light fa-search" />
+                </div>
+                <input
+                  type="search"
+                  class="form-control df-input-withicon"
+                  i18n-placeholder="@@df.sidenav.search.placeholder"
+                  placeholder="Search"
                   i18n-aria-label="@@df.sidenav.search.ariaLabel"
                   aria-label="Search"
-                ></button>
-              } @else {
-                <div class="input-group mb-3">
-                  <div class="input-group-prepend">
-                    <span class="input-group-text fa-light fa-search"></span>
-                  </div>
-                  <input
-                    type="search"
-                    class="form-control df-input-withicon"
-                    i18n-placeholder="@@df.sidenav.search.placeholder"
-                    placeholder="Search"
-                    i18n-aria-label="@@df.sidenav.search.ariaLabel"
-                    aria-label="Search"
-                    [(ngModel)]="searchTerm"
-                    #textInput
-                  />
-                  <div class="input-group-append">
-                    <button
-                      class="input-group-text fa-light fa-times"
-                      [class.df-sidenav-search-empty]="searchTerm() === ''"
-                      (click)="searchTerm.set(''); textInput.focus()"
-                    >
-                      <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
-                    </button>
-                  </div>
+                  [formField]="searchTermFormField"
+                  #textInput
+                />
+                <div class="input-group-append">
+                  <button
+                    class="input-group-text fa-light fa-times"
+                    [class.df-sidenav-search-empty]="searchTerm() === ''"
+                    (click)="searchTerm.set(''); textInput.focus(); $event.preventDefault()"
+                  >
+                    <span class="visually-hidden" i18n="@@df.sidenav.search.clearText">Clear text</span>
+                  </button>
                 </div>
-              }
+              </div>
             }
           </div>
+        }
 
-          <div role="list" class="sidenav-body flex-grow-1 overflow-y-auto" #scrollableContainer>
-            <ng-content />
+        <div role="list" class="df-sidenav-body" #scrollableContainer>
+          <ng-content />
+        </div>
+        @if (collapsible() && !isSmallScreen()) {
+          <div class="df-sidenav-footer">
+            <button
+              dfIconButton
+              class="df-sidenav-toggle-minimized"
+              [class.fa-arrow-right-to-line]="isMinimized()"
+              [class.fa-arrow-left-to-line]="!isMinimized()"
+              appearance="outline"
+              (click)="toggleMinimize()"
+              i18n-aria-label="@@df.sidenav.toggleMinimize.ariaLabel"
+              aria-label="Toggle minimized sidenav"
+            ></button>
           </div>
-          @if (collapsible() && !isSmallScreen()) {
-            <div class="d-flex sidenav-footer flex-shrink-0 py-3">
-              <button
-                class="btn btn-outline-primary df-btn-icononly df-sidenav-toggle-minimized"
-                (click)="toggleMinimize()"
-                i18n-aria-label="@@df.sidenav.toggleMinimize.ariaLabel"
-                aria-label="Toggle minimized sidenav"
-              >
-                @if (isMinimized()) {
-                  <span class="fa-arrow-right-to-line"></span>
-                } @else {
-                  <span class="fa-arrow-left-to-line"></span>
-                }
-              </button>
-            </div>
-          }
-        </nav>
-      </div>
+        }
+      </nav>
     </df-drawer>
-  `, imports: [FormsModule, DfDrawer], encapsulation: ViewEncapsulation.None, host: {
+  `, imports: [FormField, DfDrawer, DfIcon, DfIconButton], encapsulation: ViewEncapsulation.None, host: {
                         class: 'df-sidenav',
                         '[class.df-sidenav-lg]': 'isLargeUpScreen()',
                         '[class.df-sidenav-withicon]': 'contentHasIcons()',
-                        '[class.d-none]': 'isSmallScreen() && _isMinimized()',
-                        '[class.df-sidenav-drawer]': 'isMediumScreen() && !_isMinimized()'
-                    }, styles: [".df-sidenav{position:relative;--sidenav-minWidth: 44px;width:var(--sidenav-minWidth)}.df-sidenav.df-sidenav-withicon{--sidenav-minWidth: 90px}.df-sidenav.df-sidenav-lg{width:auto}.df-sidenav.df-sidenav-lg .df-drawer{--df-drawer-size: max-content}.df-sidenav.df-sidenav-light-sky .sidenav-body{scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-primary-subtle-background)}.df-sidenav.df-sidenav-light-sky .df-drawer,.df-sidenav.df-sidenav-light-sky .df-sidenav-button{background-color:var(--df-color-primary-subtle-background)}.df-sidenav .df-sidenav-search-empty{visibility:hidden}.df-sidenav .df-sidenav-mobile-drawer{top:var(--df-navbar-height, 56px)!important;height:calc(100vh - var(--df-navbar-height, 56px))!important}.df-sidenav nav{border-inline-end:1px solid var(--df-color-inert-neutral-main-border)}.df-sidenav.df-sidenav-drawer .df-drawer{z-index:2010}.df-sidenav .df-drawer{background-color:var(--df-color-inert-neutral-main-background);height:100%;--df-drawer-size: 0;--df-drawer-min-size: var(--sidenav-minWidth);--df-drawer-max-size: max-content;z-index:10;transition:none}.df-sidenav .df-drawer.df-inline-start{border:none}.df-sidenav .df-drawer.df-collapse-show{--df-drawer-size: max-content}.df-sidenav .df-drawer.df-collapse-hide{display:block}.df-sidenav .df-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-sidenav .df-sidenav-active{font-weight:var(--df-typo-weight-bold)}.df-sidenav .sidenav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.df-sidenav .sidenav-label:before{content:attr(title);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-sidenav .df-sidenav-mobile-header{padding-block-end:var(--df-spacing-2);border-block-end:1px solid var(--df-color-neutral-alt-default-border);font-weight:var(--df-typo-weight-regular)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-active .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .sidenav-body{padding:var(--df-spacing-2);scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background)}.df-sidenav .df-sidenav-search-minimized,.df-sidenav .df-sidenav-toggle-minimized{min-width:36px;position:relative;z-index:1}.df-sidenav .df-sidenav-header{padding-inline:var(--df-spacing-2);overflow:visible;position:relative}.df-sidenav .df-sidenav-header.df-sidenav-header-minimized{padding-inline:0}.df-sidenav .sidenav-footer{overflow:visible;position:relative}.df-sidenav [role=list] [role=listitem]{padding-inline-start:0}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile){padding-inline-start:var(--df-spacing-6);position:relative}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile):before{content:\"\";position:absolute;left:var(--df-spacing-5);top:0;bottom:0;width:1px;background-color:var(--df-color-neutral-soft-default-background)}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.mobile) [role=listitem]:not(.mobile){padding-inline-start:var(--df-spacing-6)}.df-sidenav .df-drawer-splitter{position:absolute;inset-block:0;inset-inline-end:-4px;width:1rem;cursor:ew-resize;background:transparent;display:flex;align-items:center;justify-content:center;touch-action:none}.df-sidenav .df-drawer-splitter .df-drawer-splitter-handle{--df-btn-bg: transparent;flex-shrink:0;transform:translate(40%);border:none;cursor:ew-resize}.df-sidenav .df-sidenav-button{--df-box-shadow-color: var(--df-color-focus-main-border);--df-btn-font-weight: var(--df-typo-weight-regular);background-color:var(--df-color-inert-neutral-main-background);padding-inline:var(--df-spacing-5);margin-block-end:1px;height:40px;border:none;position:relative}.df-sidenav .df-sidenav-button:focus-visible{z-index:1}.df-sidenav .df-sidenav-button.df-sidenav-breadcrumb-button{height:3rem}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{transition:transform .3s;color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle.expanded{transform:rotate(180deg)}.df-sidenav .df-sidenav-button:hover{background-color:var(--df-color-primary-alt-hovered-background)}.df-sidenav .df-sidenav-button:hover .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-hovered-foreground)}.df-sidenav .df-sidenav-button:active{background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button:active .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .df-sidenav-button.df-sidenav-active-level{font-weight:var(--df-typo-weight-bold);background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button.df-sidenav-active-level:hover{background-color:var(--df-color-primary-alt-activeHovered-background)}.df-sidenav .df-sidenav-item-hidden{visibility:hidden;height:0}.df-sidenav .input-group.df-input-prepend .input-group-prepend{padding-inline-start:15px}\n"] }]
+                        '[class.df-hidden]': '!isLargeUpScreen() && _isMinimized()',
+                        '[class.df-sidenav-drawer]': 'isMediumScreen() && !_isMinimized()',
+                        '[class.df-sidenav-minimized]': 'isMinimized()'
+                    }, styles: [".df-sidenav{position:relative;--sidenav-minWidth: 44px;width:var(--sidenav-minWidth)}.df-sidenav.df-sidenav-withicon{--sidenav-minWidth: 80px}.df-sidenav.df-sidenav-lg{width:auto}.df-sidenav.df-sidenav-lg .df-drawer{--df-drawer-size: max-content}.df-sidenav.df-sidenav-light-sky .df-sidenav-body{scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-primary-subtle-background)}.df-sidenav.df-sidenav-light-sky .df-drawer,.df-sidenav.df-sidenav-light-sky .df-sidenav-button{background-color:var(--df-color-primary-subtle-background)}.df-sidenav .df-sidenav-search-empty{visibility:hidden}.df-sidenav .df-sidenav-mobile-drawer{top:var(--df-navbar-height, 56px)!important;height:calc(100vh - var(--df-navbar-height, 56px))!important}.df-sidenav nav{border-inline-end:1px solid var(--df-color-inert-neutral-main-border)}.df-sidenav.df-sidenav-drawer .df-drawer{z-index:2010}.df-sidenav .df-sidenav-container{display:flex;flex-direction:column;height:100%;padding:var(--df-spacing-5);padding-block-end:var(--df-spacing-3)}.df-sidenav .df-sidenav-link-content-mobile{display:flex;flex-direction:column;align-items:flex-start}.df-sidenav .df-sidenav-link-content-mobile .df-sidenav-breadcrumb{color:var(--df-color-subtext-foreground);display:flex;gap:var(--df-spacing-1)}.df-sidenav .df-drawer{background-color:var(--df-color-inert-neutral-main-background);height:100%;--df-drawer-size: 0;--df-drawer-min-size: var(--sidenav-minWidth);--df-drawer-max-size: max-content;z-index:10;transition:none}.df-sidenav .df-drawer.df-inline-start{border:none}.df-sidenav .df-drawer.df-collapse-show{--df-drawer-size: max-content}.df-sidenav .df-drawer.df-collapse-hide{display:block}.df-sidenav .df-drawer.df-collapse-collapsing.df-collapse-horizontal{transition:none}.df-sidenav .df-sidenav-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.df-sidenav .df-sidenav-label:before{content:attr(title);font-weight:var(--df-typo-weight-bold);visibility:hidden;height:0;overflow:hidden;display:block}.df-sidenav .df-sidenav-mobile-header{padding-block-end:var(--df-spacing-2);border-block-end:1px solid var(--df-color-neutral-alt-default-border);margin-block-end:var(--df-spacing-2);font-weight:var(--df-typo-weight-regular)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-button{gap:0}.df-sidenav .df-sidenav-mobile-header .df-sidenav-mobile-header-back-arrow{margin-inline-end:var(--df-spacing-4);color:var(--df-color-primary-alt-default-foreground)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-active .df-sidenav-mobile-header-back-arrow{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .df-sidenav-mobile-header .df-sidenav-label{margin-inline-start:var(--df-spacing-3)}.df-sidenav.df-sidenav-minimized .df-sidenav-button{width:3rem}.df-sidenav.df-sidenav-minimized .df-sidenav-body{padding:0;overflow:visible}.df-sidenav .df-sidenav-body{padding:var(--df-spacing-2);scrollbar-color:var(--df-color-primary-soft-default-foreground) var(--df-color-inert-neutral-main-background);flex-grow:1;overflow-y:auto}.df-sidenav .df-sidenav-search-minimized{width:100%}.df-sidenav .df-sidenav-search-minimized-no-icons,.df-sidenav .df-sidenav-toggle-minimized{min-width:36px;position:relative;z-index:1}.df-sidenav .df-sidenav-header{margin-block-end:var(--df-spacing-3);overflow:visible;padding-inline:var(--df-spacing-2);position:relative}.df-sidenav .df-sidenav-header .input-group{flex-wrap:nowrap}.df-sidenav .df-sidenav-header.df-sidenav-header-minimized{padding-inline:0}.df-sidenav .df-sidenav-footer{overflow:visible;position:relative;padding-block:var(--df-spacing-3)}.df-sidenav [role=list] [role=listitem]{padding-inline-start:0}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.df-sidenav-mobile){padding-inline-start:var(--df-spacing-6);position:relative}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.df-sidenav-mobile):before{content:\"\";position:absolute;inset-inline-start:var(--df-spacing-5);top:0;bottom:0;width:1px;background-color:var(--df-color-neutral-soft-default-background)}.df-sidenav [role=list] [role=listitem] [role=listitem]:not(.df-sidenav-mobile) [role=listitem]:not(.df-sidenav-mobile){padding-inline-start:var(--df-spacing-6)}.df-sidenav .df-sidenav-button{align-items:center;border-radius:var(--df-borderRadius-main-medium);background-color:var(--df-color-inert-neutral-main-background);box-shadow:none;border:none;cursor:pointer;color:var(--df-color-neutral-alt-default-foreground);display:flex;font-weight:var(--df-typo-weight-regular);gap:var(--df-spacing-3);height:2.5rem;justify-content:start;margin-block-end:1px;padding-inline:var(--df-spacing-5);position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;user-select:none;width:100%}.df-sidenav .df-sidenav-button.df-sidenav-active{font-weight:var(--df-typo-weight-bold)}.df-sidenav .df-sidenav-button:focus-visible{z-index:1;outline:2px solid var(--df-color-focus-main-border);outline-offset:2px}.df-sidenav .df-sidenav-button.df-sidenav-breadcrumb-button{height:3rem}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{transition:transform .3s}@media(prefers-reduced-motion:reduce){.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{transition:none}}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-default-foreground);margin-inline-start:auto}.df-sidenav .df-sidenav-button .df-sidenav-collapse-toggle.expanded{transform:rotate(180deg)}.df-sidenav .df-sidenav-button:hover{background-color:var(--df-color-primary-alt-hovered-background);color:var(--df-color-neutral-alt-hovered-foreground)}.df-sidenav .df-sidenav-button:hover .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-hovered-foreground)}.df-sidenav .df-sidenav-button:active{background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button:active .df-sidenav-collapse-toggle{color:var(--df-color-primary-alt-active-foreground)}.df-sidenav .df-sidenav-button.df-sidenav-active-level{font-weight:var(--df-typo-weight-bold);background-color:var(--df-color-primary-alt-active-background)}.df-sidenav .df-sidenav-button.df-sidenav-active-level:hover{background-color:var(--df-color-primary-alt-activeHovered-background)}.df-sidenav .df-sidenav-item-hidden{visibility:hidden;height:0;overflow:hidden}.df-sidenav .input-group.df-input-prepend .input-group-prepend{padding-inline-start:15px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], enableMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMobile", required: false }] }], disableInitialDesktopAutoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialDesktopAutoScroll", required: false }] }], scrollableContainer: [{ type: i0.ViewChild, args: ['scrollableContainer', { isSignal: true }] }], searchInput: [{ type: i0.ViewChild, args: ['textInput', { isSignal: true }] }], allLinks: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavLinkComponent), { ...{ descendants: true }, isSignal: true }] }], allItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DfSidenavItemComponent), { ...{ descendants: true }, isSignal: true }] }] } });
 
+// Warning: I am deeply sorry for the pyramid of doom that is the nested for loops in the template, but I could not find a better way to render the nested sidenav items and keep sidenav items contentChild queries working.
+/**
+ * A wrapper of the {@link DfSidenavComponent} driven by a data array provided as an input.
+ * All inputs are forwarded to the underlying {@link DfSidenavComponent}.
+ *
+ * @since 22.0
+ */
+class DfSidenavInput {
+    constructor() {
+        /**
+         * Navigation items to render in the sidenav.
+         */
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /**
+         * Class name applied to the underlying {@link DfSidenavComponent} host element.
+         * @default ''
+         */
+        this.className = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "className" }] : /* istanbul ignore next */ []));
+        /**
+         * Flag whether the sidenav includes a search input.
+         * @default false
+         */
+        this.searchable = input(false, { ...(ngDevMode ? { debugName: "searchable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Flag whether the sidenav should be resizable.
+         * @default false
+         */
+        this.resizable = input(false, { ...(ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Flag whether the sidenav should have the collapse button.
+         * @default true
+         */
+        this.collapsible = input(true, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Flag to enable the mobile sidenav display of the items.
+         * @default true
+         */
+        this.enableMobile = input(true, { ...(ngDevMode ? { debugName: "enableMobile" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Flag to disable the automatic scroll to active link on desktop when the sidenav is initialized.
+         * @default false
+         */
+        this.disableInitialDesktopAutoScroll = input(false, { ...(ngDevMode ? { debugName: "disableInitialDesktopAutoScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this._sidenav = viewChild.required(DfSidenavComponent);
+        /**
+         * Whether the sidenav is currently minimized.
+         */
+        this.isMinimized = computed(() => this._sidenav().isMinimized() ?? false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isMinimized" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Toggle or set the minimized state of the sidenav.
+     */
+    toggleMinimize(minimized) {
+        this._sidenav().toggleMinimize(minimized);
+    }
+    isSideItem(item) {
+        return 'children' in item;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavInput, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: DfSidenavInput, isStandalone: true, selector: "df-sidenav-input", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, enableMobile: { classPropertyName: "enableMobile", publicName: "enableMobile", isSignal: true, isRequired: false, transformFunction: null }, disableInitialDesktopAutoScroll: { classPropertyName: "disableInitialDesktopAutoScroll", publicName: "disableInitialDesktopAutoScroll", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_sidenav", first: true, predicate: DfSidenavComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <df-sidenav
+      [class]="className()"
+      [searchable]="searchable()"
+      [resizable]="resizable()"
+      [collapsible]="collapsible()"
+      [enableMobile]="enableMobile()"
+      [disableInitialDesktopAutoScroll]="disableInitialDesktopAutoScroll()"
+    >
+      @for (element1 of items(); track element1.label) {
+        @if (isSideItem(element1)) {
+          <df-sidenav-item
+            [label]="element1.label"
+            [icon]="element1.icon || ''"
+            [collapsed]="element1.collapsed ?? false"
+            (collapsedChange)="element1.collapsed = $event"
+          >
+            @for (element2 of element1.children; track element2.label) {
+              @if (isSideItem(element2)) {
+                <df-sidenav-item
+                  [label]="element2.label"
+                  [icon]="element2.icon || ''"
+                  [collapsed]="element2.collapsed ?? false"
+                  (collapsedChange)="element2.collapsed = $event"
+                >
+                  @for (element3 of element2.children; track element3.label) {
+                    @if (isSideItem(element3)) {
+                      <df-sidenav-item
+                        [label]="element3.label"
+                        [icon]="element3.icon || ''"
+                        [collapsed]="element3.collapsed ?? false"
+                        (collapsedChange)="element3.collapsed = $event"
+                      >
+                        @for (element4 of element3.children; track element4.label) {
+                          @if (!isSideItem(element4)) {
+                            <df-sidenav-link
+                              [label]="element4.label"
+                              [icon]="element4.icon || ''"
+                              [linkPath]="element4.linkPath"
+                              [active]="element4.active"
+                              [routerLinkActiveOptions]="element4.routerLinkActiveOptions || { exact: false }"
+                            />
+                          }
+                        }
+                      </df-sidenav-item>
+                    } @else {
+                      <df-sidenav-link
+                        [label]="element3.label"
+                        [icon]="element3.icon || ''"
+                        [linkPath]="element3.linkPath"
+                        [active]="element3.active"
+                        [routerLinkActiveOptions]="element3.routerLinkActiveOptions || { exact: false }"
+                      />
+                    }
+                  }
+                </df-sidenav-item>
+              } @else {
+                <df-sidenav-link
+                  [label]="element2.label"
+                  [icon]="element2.icon || ''"
+                  [linkPath]="element2.linkPath"
+                  [active]="element2.active"
+                  [routerLinkActiveOptions]="element2.routerLinkActiveOptions || { exact: false }"
+                />
+              }
+            }
+          </df-sidenav-item>
+        } @else {
+          <df-sidenav-link
+            [label]="element1.label"
+            [icon]="element1.icon || ''"
+            [linkPath]="element1.linkPath"
+            [active]="element1.active"
+            [routerLinkActiveOptions]="element1.routerLinkActiveOptions || { exact: false }"
+          />
+        }
+      }
+    </df-sidenav>
+  `, isInline: true, dependencies: [{ kind: "component", type: DfSidenavComponent, selector: "df-sidenav", inputs: ["searchable", "resizable", "collapsible", "enableMobile", "disableInitialDesktopAutoScroll"] }, { kind: "component", type: DfSidenavItemComponent, selector: "df-sidenav-item", inputs: ["label", "collapsed", "icon"], outputs: ["collapsedChange"] }, { kind: "component", type: DfSidenavLinkComponent, selector: "df-sidenav-link", inputs: ["linkPath", "label", "icon", "routerLinkActiveOptions", "active"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: DfSidenavInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'df-sidenav-input',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [DfSidenavComponent, DfSidenavItemComponent, DfSidenavLinkComponent],
+                    template: `
+    <df-sidenav
+      [class]="className()"
+      [searchable]="searchable()"
+      [resizable]="resizable()"
+      [collapsible]="collapsible()"
+      [enableMobile]="enableMobile()"
+      [disableInitialDesktopAutoScroll]="disableInitialDesktopAutoScroll()"
+    >
+      @for (element1 of items(); track element1.label) {
+        @if (isSideItem(element1)) {
+          <df-sidenav-item
+            [label]="element1.label"
+            [icon]="element1.icon || ''"
+            [collapsed]="element1.collapsed ?? false"
+            (collapsedChange)="element1.collapsed = $event"
+          >
+            @for (element2 of element1.children; track element2.label) {
+              @if (isSideItem(element2)) {
+                <df-sidenav-item
+                  [label]="element2.label"
+                  [icon]="element2.icon || ''"
+                  [collapsed]="element2.collapsed ?? false"
+                  (collapsedChange)="element2.collapsed = $event"
+                >
+                  @for (element3 of element2.children; track element3.label) {
+                    @if (isSideItem(element3)) {
+                      <df-sidenav-item
+                        [label]="element3.label"
+                        [icon]="element3.icon || ''"
+                        [collapsed]="element3.collapsed ?? false"
+                        (collapsedChange)="element3.collapsed = $event"
+                      >
+                        @for (element4 of element3.children; track element4.label) {
+                          @if (!isSideItem(element4)) {
+                            <df-sidenav-link
+                              [label]="element4.label"
+                              [icon]="element4.icon || ''"
+                              [linkPath]="element4.linkPath"
+                              [active]="element4.active"
+                              [routerLinkActiveOptions]="element4.routerLinkActiveOptions || { exact: false }"
+                            />
+                          }
+                        }
+                      </df-sidenav-item>
+                    } @else {
+                      <df-sidenav-link
+                        [label]="element3.label"
+                        [icon]="element3.icon || ''"
+                        [linkPath]="element3.linkPath"
+                        [active]="element3.active"
+                        [routerLinkActiveOptions]="element3.routerLinkActiveOptions || { exact: false }"
+                      />
+                    }
+                  }
+                </df-sidenav-item>
+              } @else {
+                <df-sidenav-link
+                  [label]="element2.label"
+                  [icon]="element2.icon || ''"
+                  [linkPath]="element2.linkPath"
+                  [active]="element2.active"
+                  [routerLinkActiveOptions]="element2.routerLinkActiveOptions || { exact: false }"
+                />
+              }
+            }
+          </df-sidenav-item>
+        } @else {
+          <df-sidenav-link
+            [label]="element1.label"
+            [icon]="element1.icon || ''"
+            [linkPath]="element1.linkPath"
+            [active]="element1.active"
+            [routerLinkActiveOptions]="element1.routerLinkActiveOptions || { exact: false }"
+          />
+        }
+      }
+    </df-sidenav>
+  `
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], enableMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableMobile", required: false }] }], disableInitialDesktopAutoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableInitialDesktopAutoScroll", required: false }] }], _sidenav: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DfSidenavComponent), { isSignal: true }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { DfSidenavComponent, DfSidenavIconDirective, DfSidenavItemComponent, DfSidenavLinkComponent };
+export { DfSidenavComponent, DfSidenavIconDirective, DfSidenavInput, DfSidenavItemComponent, DfSidenavLinkComponent };
 //# sourceMappingURL=design-factory-angular-sidenav.mjs.map