From 320a217216403ffdcb0b0ad67678461ad7b1b520 Mon Sep 17 00:00:00 2001
From: Tim Fabian <fabian@service-soft.de>
Date: Sun, 8 Feb 2026 20:02:58 +0100
Subject: [PATCH] switched to ngClass

---
 projects/ngx-material-navigation/package.json |  2 +-
 .../components/navbar/navbar.component.html   | 50 +++++++++++++++++--
 .../src/components/navbar/navbar.component.ts |  5 --
 3 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/projects/ngx-material-navigation/package.json b/projects/ngx-material-navigation/package.json
index bd52383..86f5f39 100644
--- a/projects/ngx-material-navigation/package.json
+++ b/projects/ngx-material-navigation/package.json
@@ -1,6 +1,6 @@
 {
     "name": "ngx-material-navigation",
-    "version": "20.2.1",
+    "version": "20.2.2",
     "license": "MIT",
     "repository": {
         "url": "https://github.com/Service-Soft/ngx-material-navigation"
diff --git a/projects/ngx-material-navigation/src/components/navbar/navbar.component.html b/projects/ngx-material-navigation/src/components/navbar/navbar.component.html
index 1c95975..045c845 100644
--- a/projects/ngx-material-navigation/src/components/navbar/navbar.component.html
+++ b/projects/ngx-material-navigation/src/components/navbar/navbar.component.html
@@ -6,17 +6,53 @@
             <div class="toolbar-row">
                 <div class="toolbar-col">
                     @for (element of getNavbarElements(row, 'left'); track element.id) {
-                        <ngx-mat-navigation-element [class]="getElementClass(element)" [element]="element" [(sidenavOpened)]="sidenavOpened" (click)="clickSidenavElement(element)"></ngx-mat-navigation-element>
+                        <ngx-mat-navigation-element
+                            [ngClass]="{
+                                'collapse-sm': element.collapse === 'sm' || element.collapse === undefined,
+                                'collapse-md': element.collapse === 'md',
+                                'collapse-lg': element.collapse === 'lg',
+                                'collapse-always': element.collapse === 'always',
+                                'collapse-never': element.collapse === 'never',
+                            }"
+                            [element]="element" 
+                            [(sidenavOpened)]="sidenavOpened" 
+                            (click)="clickSidenavElement(element)"
+                        >
+                        </ngx-mat-navigation-element>
                     }
                 </div>
                 <div class="toolbar-col">
                     @for (element of getNavbarElements(row, 'center'); track element.id) {
-                        <ngx-mat-navigation-element [class]="getElementClass(element)" [element]="element" [(sidenavOpened)]="sidenavOpened" (click)="clickSidenavElement(element)"></ngx-mat-navigation-element>
+                        <ngx-mat-navigation-element 
+                            [ngClass]="{
+                                'collapse-sm': element.collapse === 'sm' || element.collapse === undefined,
+                                'collapse-md': element.collapse === 'md',
+                                'collapse-lg': element.collapse === 'lg',
+                                'collapse-always': element.collapse === 'always',
+                                'collapse-never': element.collapse === 'never',
+                            }"
+                            [element]="element" 
+                            [(sidenavOpened)]="sidenavOpened"
+                            (click)="clickSidenavElement(element)"
+                        >
+                        </ngx-mat-navigation-element>
                     }
                 </div>
                 <div class="toolbar-col">
                     @for (element of getNavbarElements(row, 'right'); track element.id) {
-                        <ngx-mat-navigation-element [class]="getElementClass(element)" [element]="element" [(sidenavOpened)]="sidenavOpened" (click)="clickSidenavElement(element)"></ngx-mat-navigation-element>
+                        <ngx-mat-navigation-element
+                            [ngClass]="{
+                                'collapse-sm': element.collapse === 'sm' || element.collapse === undefined,
+                                'collapse-md': element.collapse === 'md',
+                                'collapse-lg': element.collapse === 'lg',
+                                'collapse-always': element.collapse === 'always',
+                                'collapse-never': element.collapse === 'never',
+                            }"
+                            [element]="element" 
+                            [(sidenavOpened)]="sidenavOpened" 
+                            (click)="clickSidenavElement(element)"
+                        >
+                        </ngx-mat-navigation-element>
                     }
                     @if ($index === 0) {
                         <ngx-mat-navigation-element [class]="getBurgerMenuClass()" [element]="burgerMenu"></ngx-mat-navigation-element>
@@ -51,7 +87,13 @@
         @for (element of sidenavElements; track element.id) {
             <div class="sidenav-row">
                 <ngx-mat-navigation-element
-                    [class]="getElementClass(element)"
+                    [ngClass]="{
+                        'collapse-sm': element.collapse === 'sm' || element.collapse === undefined,
+                        'collapse-md': element.collapse === 'md',
+                        'collapse-lg': element.collapse === 'lg',
+                        'collapse-always': element.collapse === 'always',
+                        'collapse-never': element.collapse === 'never',
+                    }"
                     [isSidenavElement]="true"
                     [element]="element"
                     [(sidenavOpened)]="sidenavOpened"
diff --git a/projects/ngx-material-navigation/src/components/navbar/navbar.component.ts b/projects/ngx-material-navigation/src/components/navbar/navbar.component.ts
index 60e6d29..22c2741 100644
--- a/projects/ngx-material-navigation/src/components/navbar/navbar.component.ts
+++ b/projects/ngx-material-navigation/src/components/navbar/navbar.component.ts
@@ -196,11 +196,6 @@ export class NgxMatNavigationNavbarComponent implements AfterContentChecked {
         }
     }
 
-    // eslint-disable-next-line jsdoc/require-jsdoc
-    getElementClass(element: NavElement): string {
-        return `collapse-${element.collapse ?? 'sm'}`;
-    }
-
     // eslint-disable-next-line jsdoc/require-jsdoc
     getBurgerMenuClass(): string {
         if (this.sidenavElements.find(e => e.collapse === 'always')) {