@rxap/layout 19.1.0-dev.0 → 19.1.0-dev.2

package/docs/wiki/Interface.SettingsMenuItem.md

@@ -2,7 +2,7 @@
 
 # Interface: SettingsMenuItem
 
-Defined in: [types.ts:19](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/types.ts#L19)
+Defined in: [types.ts:19](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/types.ts#L19)
 
 ## Properties
 
@@ -10,7 +10,7 @@ Defined in: [types.ts:19](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f
 
 > **action**: () => `any`
 
-Defined in: [types.ts:22](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/types.ts#L22)
+Defined in: [types.ts:22](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/types.ts#L22)
 
 #### Returns
 
@@ -22,7 +22,7 @@ Defined in: [types.ts:22](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f
 
 > `optional` **icon**: `IconConfig`
 
-Defined in: [types.ts:20](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/types.ts#L20)
+Defined in: [types.ts:20](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/types.ts#L20)
 
 ***
 
@@ -30,4 +30,4 @@ Defined in: [types.ts:20](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f
 
 > **label**: `string`
 
-Defined in: [types.ts:21](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/types.ts#L21)
+Defined in: [types.ts:21](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/types.ts#L21)

package/docs/wiki/TypeAlias.DefaultHeaderItemComponent.md

@@ -4,4 +4,4 @@
 
 > **DefaultHeaderItemComponent**: `ComponentType`\<`unknown`\>
 
-Defined in: [types.ts:17](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/types.ts#L17)
+Defined in: [types.ts:17](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/types.ts#L17)

package/docs/wiki/TypeAlias.ExternalApp.md

@@ -4,4 +4,4 @@
 
 > **ExternalApp**: `AppsNavigationConfig`
 
-Defined in: [types.ts:7](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/types.ts#L7)
+Defined in: [types.ts:7](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/types.ts#L7)

package/docs/wiki/TypeAlias.ExtractUsernameFromProfileFn.md

@@ -4,7 +4,7 @@
 
 > **ExtractUsernameFromProfileFn**\<`T`\>: (`profile`) => `string` \| `null`
 
-Defined in: [types.ts:8](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/types.ts#L8)
+Defined in: [types.ts:8](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/types.ts#L8)
 
 ## Type Parameters
 

package/docs/wiki/TypeAlias.Navigation.md

@@ -4,4 +4,4 @@
 
 > **Navigation**: ([`NavigationItem`](../wiki/Interface.NavigationItem) \| [`NavigationDividerItem`](../wiki/Interface.NavigationDividerItem))[]
 
-Defined in: [navigation/navigation-item.ts:9](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/navigation/navigation-item.ts#L9)
+Defined in: [navigation/navigation-item.ts:9](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/navigation/navigation-item.ts#L9)

package/docs/wiki/TypeAlias.NavigationWithInserts.md

@@ -4,4 +4,4 @@
 
 > **NavigationWithInserts**: ([`NavigationItem`](../wiki/Interface.NavigationItem)\<[`NavigationWithInserts`](../wiki/TypeAlias.NavigationWithInserts)\> \| [`NavigationDividerItem`](../wiki/Interface.NavigationDividerItem) \| [`NavigationInsertItem`](../wiki/Interface.NavigationInsertItem))[]
 
-Defined in: [navigation/navigation-item.ts:11](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/navigation/navigation-item.ts#L11)
+Defined in: [navigation/navigation-item.ts:11](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/navigation/navigation-item.ts#L11)

package/docs/wiki/TypeAlias.SettingsMenuItemComponent.md

@@ -4,4 +4,4 @@
 
 > **SettingsMenuItemComponent**: `ComponentType`\<`unknown`\>
 
-Defined in: [types.ts:15](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/types.ts#L15)
+Defined in: [types.ts:15](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/types.ts#L15)

package/docs/wiki/Variable.EXTRACT_USERNAME_FROM_PROFILE.md

@@ -4,4 +4,4 @@
 
 > `const` **EXTRACT\_USERNAME\_FROM\_PROFILE**: `InjectionToken`\<[`ExtractUsernameFromProfileFn`](../wiki/TypeAlias.ExtractUsernameFromProfileFn)\>
 
-Defined in: [tokens.ts:33](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L33)
+Defined in: [tokens.ts:33](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L33)

package/docs/wiki/Variable.RXAP_DEFAULT_HEADER_ITEM_COMPONENT.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_DEFAULT\_HEADER\_ITEM\_COMPONENT**: `InjectionToken`\<([`DefaultHeaderItemComponent`](../wiki/TypeAlias.DefaultHeaderItemComponent) \| () => `Promise`\<[`DefaultHeaderItemComponent`](../wiki/TypeAlias.DefaultHeaderItemComponent)\>)[]\>
 
-Defined in: [tokens.ts:54](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L54)
+Defined in: [tokens.ts:54](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L54)

package/docs/wiki/Variable.RXAP_EXTERNAL_APP.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_EXTERNAL\_APP**: `InjectionToken`\<`AppsNavigationConfig`\>
 
-Defined in: [tokens.ts:48](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L48)
+Defined in: [tokens.ts:48](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L48)

package/docs/wiki/Variable.RXAP_EXTERNAL_APP_FILTER.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_EXTERNAL\_APP\_FILTER**: `InjectionToken`\<`MethodWithParameters`\<`AppsNavigationConfig`[], `AppsNavigationConfig`[]\>\>
 
-Defined in: [tokens.ts:32](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L32)
+Defined in: [tokens.ts:32](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L32)

package/docs/wiki/Variable.RXAP_FOOTER_COMPONENT.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_FOOTER\_COMPONENT**: `InjectionToken`\<`ComponentType`\<`unknown`\>\>
 
-Defined in: [tokens.ts:27](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L27)
+Defined in: [tokens.ts:27](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L27)

package/docs/wiki/Variable.RXAP_HEADER_COMPONENT.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_HEADER\_COMPONENT**: `InjectionToken`\<`ComponentType`\<`unknown`\>\>
 
-Defined in: [tokens.ts:28](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L28)
+Defined in: [tokens.ts:28](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L28)

package/docs/wiki/Variable.RXAP_LAYOUT_APPS_GRID.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_LAYOUT\_APPS\_GRID**: `InjectionToken`\<`unknown`\>
 
-Defined in: [tokens.ts:30](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L30)
+Defined in: [tokens.ts:30](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L30)

package/docs/wiki/Variable.RXAP_LOGO_CONFIG.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_LOGO\_CONFIG**: `InjectionToken`\<`LogoConfig`\>
 
-Defined in: [tokens.ts:29](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L29)
+Defined in: [tokens.ts:29](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L29)

package/docs/wiki/Variable.RXAP_LOGO_CONFIG_DEFAULTS.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_LOGO\_CONFIG\_DEFAULTS**: `InjectionToken`\<`LogoConfig`\>
 
-Defined in: [tokens.ts:60](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L60)
+Defined in: [tokens.ts:60](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L60)

package/docs/wiki/Variable.RXAP_NAVIGATION_CONFIG.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_NAVIGATION\_CONFIG**: `InjectionToken`\<[`NavigationWithInserts`](../wiki/TypeAlias.NavigationWithInserts) \| () => [`NavigationWithInserts`](../wiki/TypeAlias.NavigationWithInserts)\>
 
-Defined in: [tokens.ts:22](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L22)
+Defined in: [tokens.ts:22](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L22)

package/docs/wiki/Variable.RXAP_NAVIGATION_CONFIG_INSERTS.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_NAVIGATION\_CONFIG\_INSERTS**: `InjectionToken`\<`Record`\<`string`, [`NavigationWithInserts`](../wiki/TypeAlias.NavigationWithInserts)\>\>
 
-Defined in: [tokens.ts:24](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L24)
+Defined in: [tokens.ts:24](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L24)

package/docs/wiki/Variable.RXAP_NAVIGATION_LAYOUT_CONFIG_DEFAULTS.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_NAVIGATION\_LAYOUT\_CONFIG\_DEFAULTS**: `InjectionToken`\<`Omit`\<`NavigationConfig`, `"apps"`\>\>
 
-Defined in: [tokens.ts:58](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L58)
+Defined in: [tokens.ts:58](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L58)

package/docs/wiki/Variable.RXAP_RELEASE_INFO_MODULE.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_RELEASE\_INFO\_MODULE**: `InjectionToken`\<[`ReleaseInfoModule`](../wiki/Interface.ReleaseInfoModule)\>
 
-Defined in: [tokens.ts:50](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L50)
+Defined in: [tokens.ts:50](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L50)

package/docs/wiki/Variable.RXAP_SETTINGS_MENU_ITEM.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_SETTINGS\_MENU\_ITEM**: `InjectionToken`\<[`SettingsMenuItem`](../wiki/Interface.SettingsMenuItem)\>
 
-Defined in: [tokens.ts:56](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L56)
+Defined in: [tokens.ts:56](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L56)

package/docs/wiki/Variable.RXAP_SETTINGS_MENU_ITEM_COMPONENT.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_SETTINGS\_MENU\_ITEM\_COMPONENT**: `InjectionToken`\<([`SettingsMenuItemComponent`](../wiki/TypeAlias.SettingsMenuItemComponent) \| () => `Promise`\<[`SettingsMenuItemComponent`](../wiki/TypeAlias.SettingsMenuItemComponent)\>)[]\>
 
-Defined in: [tokens.ts:52](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L52)
+Defined in: [tokens.ts:52](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L52)

package/docs/wiki/Variable.RXAP_USER_PROFILE_DATA_SOURCE.md

@@ -4,4 +4,4 @@
 
 > `const` **RXAP\_USER\_PROFILE\_DATA\_SOURCE**: `InjectionToken`\<`DataSource`\<`unknown`, `DataSourceViewer`\>\>
 
-Defined in: [tokens.ts:43](https://gitlab.com/rxap/packages/-/blob/2df84dd31f2c1f51c5906e2b86bf28c7e814f454/packages/angular/layout/src/lib/tokens.ts#L43)
+Defined in: [tokens.ts:43](https://gitlab.com/rxap/packages/-/blob/f78a82a9c44bbd717ad98e46a037f325ee3f7f09/packages/angular/layout/src/lib/tokens.ts#L43)

package/docs/wiki/globals.md

@@ -1,4 +1,4 @@
-# @rxap/layout v19.1.0-dev.0
+# @rxap/layout v19.1.0-dev.2
 
 ## Classes
 

package/fesm2022/rxap-layout.mjs

@@ -7,7 +7,6 @@ import { MatDividerModule, MatDivider } from '@angular/material/divider';
 import * as i2 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import { MatSidenav, MatSidenavContainer, MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
-import { Router, NavigationEnd, RouterLinkActive, RouterLink, RouterOutlet, NavigationStart, NavigationCancel } from '@angular/router';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ConfigService } from '@rxap/config';
@@ -21,6 +20,7 @@ import { switchMap, catchError, map, filter, startWith, tap } from 'rxjs/operato
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1 from '@angular/material/core';
 import { MatRippleModule } from '@angular/material/core';
+import { Router, NavigationEnd, RouterLinkActive, RouterLink, NavigationStart, NavigationCancel, RouterOutlet } from '@angular/router';
 import { IconDirective } from '@rxap/material-directives/icon';
 import { MatDialog } from '@angular/material/dialog';
 import { DetermineReleaseName, RXAP_ENVIRONMENT, EnvironmentComponent } from '@rxap/environment';
@@ -200,24 +200,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
         }] });
 
 class LayoutService {
-    constructor(navigationConfigDefaults = {}) {
+    constructor(navigationConfigDefaults = null) {
         this.currentThemeDensity = toSignal(ObserveCurrentThemeDensity());
         this.footerService = inject(FooterService);
         this.headerService = inject(HeaderService);
         this.config = inject(ConfigService);
         this.mediaMatcher = inject(MediaMatcher);
-        const mobileQuery = this.mediaMatcher.matchMedia('(max-width: 959px)');
+        const mobileQuery = this.mediaMatcher.matchMedia(navigationConfigDefaults?.mobileQuery ?? '(max-width: 959px)');
         this.isMobile = toSignal(new Observable(subscriber => {
             mobileQuery.addEventListener('change', (event) => {
                 subscriber.next(event.matches);
             });
         }), { initialValue: mobileQuery.matches });
-        const initialCollapsable = this.config.get('navigation.collapsable', navigationConfigDefaults.collapsable ?? true);
+        const initialCollapsable = this.config.get('navigation.collapsable', navigationConfigDefaults?.collapsable ?? true);
         const collapsable = initialCollapsable && !this.isMobile();
-        const pinned = this.config.get('navigation.pinned', navigationConfigDefaults.pinned ?? false);
-        const mode = this.config.get('navigation.mode', navigationConfigDefaults.mode ?? (pinned || !collapsable ? 'side' : 'over'));
-        const opened = this.config.get('navigation.opened', (navigationConfigDefaults.opened ?? (!collapsable || pinned)) && !this.isMobile());
-        const fixedInViewport = this.config.get('navigation.fixedInViewport', navigationConfigDefaults.fixedInViewport ?? true);
+        const pinned = this.config.get('navigation.pinned', navigationConfigDefaults?.pinned ?? false);
+        const mode = this.config.get('navigation.mode', navigationConfigDefaults?.mode ?? (pinned || !collapsable ? 'side' : 'over'));
+        const opened = this.config.get('navigation.opened', (navigationConfigDefaults?.opened ?? (!collapsable || pinned)) && !this.isMobile());
+        const fixedInViewport = this.config.get('navigation.fixedInViewport', navigationConfigDefaults?.fixedInViewport ?? true);
         if (isDevMode()) {
             console.log({
                 initialCollapsable,
@@ -453,6 +453,11 @@ class NavigationItemComponent {
         this.elementRef = inject(ElementRef);
         this.renderer = inject(Renderer2);
     }
+    onClick() {
+        if (this.layoutService.isMobile() || this.layoutService.collapsed()) {
+            this.layoutService.opened.set(false);
+        }
+    }
     ngOnChanges(changes) {
         if (changes['item']) {
             const item = changes['item'].currentValue;
@@ -506,7 +511,7 @@ class NavigationItemComponent {
         return item;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: NavigationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NavigationItemComponent, isStandalone: true, selector: "li[rxap-navigation-item]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item().routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n\n  >\n    <span\n      [ngClass]=\"itemClasses()\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item().label }}\n    </span>\n    <mat-icon *ngIf=\"item().icon as icon\" [rxapIcon]=\"icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item().children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level() + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(() => RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(() => RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRippleModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatRipple), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "mat-icon[rxapIcon]", inputs: ["rxapIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDividerModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatDivider), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(() => NavigationComponent), selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.1", type: NavigationItemComponent, isStandalone: true, selector: "li[rxap-navigation-item]", inputs: { level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item().routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n     (click)=\"onClick()\"\n  >\n    <span\n      [ngClass]=\"itemClasses()\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item().label }}\n    </span>\n    <mat-icon *ngIf=\"item().icon as icon\" [rxapIcon]=\"icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item().children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level() + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i0.forwardRef(() => RouterLinkActive), selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i0.forwardRef(() => RouterLink), selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i0.forwardRef(() => NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatRippleModule) }, { kind: "directive", type: i0.forwardRef(() => i1.MatRipple), selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatIconModule) }, { kind: "component", type: i0.forwardRef(() => i2.MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i0.forwardRef(() => IconDirective), selector: "mat-icon[rxapIcon]", inputs: ["rxapIcon"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatDividerModule) }, { kind: "component", type: i0.forwardRef(() => i3.MatDivider), selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i0.forwardRef(() => NavigationComponent), selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
             trigger('sub-nav', [
                 transition(':enter', [
                     style({
@@ -552,7 +557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         MatDividerModule,
                         forwardRef(() => NavigationComponent),
                         NgClass,
-                    ], template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item().routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n\n  >\n    <span\n      [ngClass]=\"itemClasses()\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item().label }}\n    </span>\n    <mat-icon *ngIf=\"item().icon as icon\" [rxapIcon]=\"icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item().children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level() + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n" }]
+                    ], template: "<div [ngClass]=\"{\n     'border-l-4 text-accent-400 border-accent-600': active(),\n     }\">\n  <a [routerLink]=\"item().routerLink\"\n     class=\"h-12 pl-4 pr-5 flex flex-row justify-between items-center gap-x-4\"\n     matRipple\n     routerLinkActive\n     (click)=\"onClick()\"\n  >\n    <span\n      [ngClass]=\"itemClasses()\"\n      class=\"grow whitespace-nowrap\"\n    >\n      {{ item().label }}\n    </span>\n    <mat-icon *ngIf=\"item().icon as icon\" [rxapIcon]=\"icon\"></mat-icon>\n  </a>\n\n  <ng-container *ngIf=\"item().children?.length && active()\">\n\n    <mat-divider></mat-divider>\n\n    <ul [@sub-nav]\n        [items]=\"children ?? []\"\n        [level]=\"level() + 1\"\n        rxap-navigation\n    >\n    </ul>\n\n    <mat-divider></mat-divider>\n\n  </ng-container>\n</div>\n" }]
         }] });
 
 class NavigationComponent {
@@ -621,6 +626,9 @@ class SidenavComponent {
     togglePinned() {
         this.layoutService.togglePinned();
     }
+    onOpenedChanged(opened) {
+        this.layoutService.opened.set(opened);
+    }
     async openSidenav() {
         await this.sidenav()?.open();
         this.layoutService.openSidenav();
@@ -630,7 +638,7 @@ class SidenavComponent {
         this.layoutService.closeSidenav();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SidenavComponent, isStandalone: true, selector: "rxap-sidenav", queries: [{ propertyName: "sidenavFooterDirective", first: true, predicate: SidenavFooterDirective, descendants: true, isSignal: true }, { propertyName: "sidenavHeaderDirective", first: true, predicate: SidenavHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container [ngStyle]=\"{\n    'padding-top.px': fixedTopGap(),\n    'padding-bottom.px': fixedBottomGap(),\n  }\" class=\"h-full\">\n  <mat-sidenav\n    [fixedBottomGap]=\"fixedBottomGap()\"\n    [fixedInViewport]=\"fixedInViewport()\"\n    [fixedTopGap]=\"fixedTopGap()\"\n    [mode]=\"sidenavMode()\"\n    [ngClass]=\"{ collapsable: collapsable() }\"\n    [opened]=\"opened()\"\n  >\n    <div (mouseleave)=\"collapsable() && !pinned() && closeSidenav()\"\n         class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n      <div (click)=\"togglePinned()\" *ngIf=\"collapsable()\"\n           class=\"pl-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n        <span class=\"text-lg\" i18n>Navigation</span>\n        <div class=\"flex flex-row items-center justify-center\" style=\"width: 64px\">\n          <button mat-icon-button>\n            <mat-icon *ngIf=\"!pinned()\">radio_button_unchecked</mat-icon>\n            <mat-icon *ngIf=\"pinned()\">radio_button_checked</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      @if (sidenavHeaderDirective()?.template; as template) {\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"header grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n      }\n\n      <ul\n        (mouseenter)=\"collapsable() && !pinned() && openSidenav()\"\n        class=\"grow self-stretch\"\n        [root]=\"true\"\n        rxap-navigation\n      >\n      </ul>\n\n      @if (sidenavFooterDirective()?.template; as template) {\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"footer grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n      }\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host .collapsable.mat-drawer:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .collapsable.mat-drawer:not(.mat-drawer-opened) ::ng-deep .mat-drawer-inner-container{display:block}:host .collapsable.mat-drawer ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: SidenavComponent, isStandalone: true, selector: "rxap-sidenav", queries: [{ propertyName: "sidenavFooterDirective", first: true, predicate: SidenavFooterDirective, descendants: true, isSignal: true }, { propertyName: "sidenavHeaderDirective", first: true, predicate: SidenavHeaderDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "sidenav", first: true, predicate: MatSidenav, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container [ngStyle]=\"{\n    'padding-top.px': fixedTopGap(),\n    'padding-bottom.px': fixedBottomGap(),\n  }\" class=\"h-full\">\n  <mat-sidenav\n    [fixedBottomGap]=\"fixedBottomGap()\"\n    [fixedInViewport]=\"fixedInViewport()\"\n    [fixedTopGap]=\"fixedTopGap()\"\n    [mode]=\"sidenavMode()\"\n    [ngClass]=\"{ collapsable: collapsable() }\"\n    [opened]=\"opened()\"\n    (openedChange)=\"onOpenedChanged($event)\"\n  >\n    <div (mouseleave)=\"collapsable() && !pinned() && closeSidenav()\"\n         class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n      <div (click)=\"togglePinned()\" *ngIf=\"collapsable()\"\n           class=\"pl-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n        <span class=\"text-lg\" i18n>Navigation</span>\n        <div class=\"flex flex-row items-center justify-center\" style=\"width: 64px\">\n          <button mat-icon-button>\n            <mat-icon *ngIf=\"!pinned()\">radio_button_unchecked</mat-icon>\n            <mat-icon *ngIf=\"pinned()\">radio_button_checked</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      @if (sidenavHeaderDirective()?.template; as template) {\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"header grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n      }\n\n      <ul\n        (mouseenter)=\"collapsable() && !pinned() && openSidenav()\"\n        class=\"grow self-stretch\"\n        [root]=\"true\"\n        rxap-navigation\n      >\n      </ul>\n\n      @if (sidenavFooterDirective()?.template; as template) {\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"footer grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n      }\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host .collapsable.mat-drawer:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .collapsable.mat-drawer:not(.mat-drawer-opened) ::ng-deep .mat-drawer-inner-container{display:block}:host .collapsable.mat-drawer ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: NavigationComponent, selector: "ul[rxap-navigation]", inputs: ["items", "level", "root"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: SidenavComponent, decorators: [{
             type: Component,
@@ -642,13 +650,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         MatSidenavContent,
                         NavigationComponent,
                         NgIf,
-                        RouterOutlet,
                         NgClass,
                         NgStyle,
                         MatDivider,
                         NgTemplateOutlet,
-                        MatButton,
-                    ], template: "<mat-sidenav-container [ngStyle]=\"{\n    'padding-top.px': fixedTopGap(),\n    'padding-bottom.px': fixedBottomGap(),\n  }\" class=\"h-full\">\n  <mat-sidenav\n    [fixedBottomGap]=\"fixedBottomGap()\"\n    [fixedInViewport]=\"fixedInViewport()\"\n    [fixedTopGap]=\"fixedTopGap()\"\n    [mode]=\"sidenavMode()\"\n    [ngClass]=\"{ collapsable: collapsable() }\"\n    [opened]=\"opened()\"\n  >\n    <div (mouseleave)=\"collapsable() && !pinned() && closeSidenav()\"\n         class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n      <div (click)=\"togglePinned()\" *ngIf=\"collapsable()\"\n           class=\"pl-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n        <span class=\"text-lg\" i18n>Navigation</span>\n        <div class=\"flex flex-row items-center justify-center\" style=\"width: 64px\">\n          <button mat-icon-button>\n            <mat-icon *ngIf=\"!pinned()\">radio_button_unchecked</mat-icon>\n            <mat-icon *ngIf=\"pinned()\">radio_button_checked</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      @if (sidenavHeaderDirective()?.template; as template) {\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"header grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n      }\n\n      <ul\n        (mouseenter)=\"collapsable() && !pinned() && openSidenav()\"\n        class=\"grow self-stretch\"\n        [root]=\"true\"\n        rxap-navigation\n      >\n      </ul>\n\n      @if (sidenavFooterDirective()?.template; as template) {\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"footer grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n      }\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host .collapsable.mat-drawer:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .collapsable.mat-drawer:not(.mat-drawer-opened) ::ng-deep .mat-drawer-inner-container{display:block}:host .collapsable.mat-drawer ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"] }]
+                    ], template: "<mat-sidenav-container [ngStyle]=\"{\n    'padding-top.px': fixedTopGap(),\n    'padding-bottom.px': fixedBottomGap(),\n  }\" class=\"h-full\">\n  <mat-sidenav\n    [fixedBottomGap]=\"fixedBottomGap()\"\n    [fixedInViewport]=\"fixedInViewport()\"\n    [fixedTopGap]=\"fixedTopGap()\"\n    [mode]=\"sidenavMode()\"\n    [ngClass]=\"{ collapsable: collapsable() }\"\n    [opened]=\"opened()\"\n    (openedChange)=\"onOpenedChanged($event)\"\n  >\n    <div (mouseleave)=\"collapsable() && !pinned() && closeSidenav()\"\n         class=\"h-full py-2 flex flex-col items-center gap-y-5 justify-items-stretch\">\n\n      <div (click)=\"togglePinned()\" *ngIf=\"collapsable()\"\n           class=\"pl-2 self-stretch grow-0 flex flex-row justify-between items-center\">\n        <span class=\"text-lg\" i18n>Navigation</span>\n        <div class=\"flex flex-row items-center justify-center\" style=\"width: 64px\">\n          <button mat-icon-button>\n            <mat-icon *ngIf=\"!pinned()\">radio_button_unchecked</mat-icon>\n            <mat-icon *ngIf=\"pinned()\">radio_button_checked</mat-icon>\n          </button>\n        </div>\n      </div>\n\n      @if (sidenavHeaderDirective()?.template; as template) {\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"header grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n      }\n\n      <ul\n        (mouseenter)=\"collapsable() && !pinned() && openSidenav()\"\n        class=\"grow self-stretch\"\n        [root]=\"true\"\n        rxap-navigation\n      >\n      </ul>\n\n      @if (sidenavFooterDirective()?.template; as template) {\n        <mat-divider [ngClass]=\"{ hidden: collapsed() }\" class=\"grow-0\"></mat-divider>\n        <div [ngClass]=\"{ hidden: collapsed() }\" class=\"footer grow-0\">\n          <ng-container *ngTemplateOutlet=\"template\"></ng-container>\n        </div>\n      }\n    </div>\n  </mat-sidenav>\n  <mat-sidenav-content [ngClass]=\"{ 'ml-16': collapsable() }\" class=\"p-4\">\n    <ng-content></ng-content>\n  </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host .collapsable.mat-drawer:not(.mat-drawer-opened){transform:translate(calc(-100% + 64px))!important;visibility:visible!important;box-shadow:inherit!important;transition-property:transform;transition-delay:.25s;display:flex;border-right:solid 1px rgba(0,0,0,.12)}:host .collapsable.mat-drawer:not(.mat-drawer-opened) ::ng-deep .mat-drawer-inner-container{display:block}:host .collapsable.mat-drawer ::ng-deep .mat-drawer-inner-container::-webkit-scrollbar{display:none}\n"] }]
         }] });
 
 class ReleaseInfoComponent {
@@ -1142,7 +1148,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
 class DefaultHeaderComponent {
     constructor() {
         this.layoutComponentService = inject(LayoutService);
-        this.collapsable = computed(() => this.layoutComponentService.collapsable());
+        this.collapsed = computed(() => this.layoutComponentService.collapsed());
+        this.isMobile = computed(() => this.layoutComponentService.isMobile());
         this.opened = computed(() => this.layoutComponentService.opened());
         this.profile = toSignal(inject(RXAP_USER_PROFILE_DATA_SOURCE).connect('user-profile'), { initialValue: null });
         this.defaultHeaderService = inject(DefaultHeaderService);
@@ -1150,7 +1157,7 @@ class DefaultHeaderComponent {
         this.hasPortals = computed(() => this.portals().length > 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DefaultHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: DefaultHeaderComponent, isStandalone: true, selector: "rxap-default-header", host: { classAttribute: "grow" }, ngImport: i0, template: "<div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n  @if (collapsable()) {\n    <rxap-sidenav-toggle-button></rxap-sidenav-toggle-button>\n  }\n  <div class=\"grow flex flex-row gap-x-4 items-center\">\n    @for (portal of portals(); track portal) {\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    }\n    <ng-content></ng-content>\n  </div>\n  <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n  <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n  @if (profile(); as profile) {\n    <rxap-user-profile-icon [profile]=\"profile\" class=\"grow-0\"></rxap-user-profile-icon>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AppsButtonComponent, selector: "rxap-apps-button" }, { kind: "component", type: SettingsButtonComponent, selector: "rxap-settings-button" }, { kind: "component", type: SidenavToggleButtonComponent, selector: "rxap-sidenav-toggle-button" }, { kind: "component", type: UserProfileIconComponent, selector: "rxap-user-profile-icon", inputs: ["profile"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.1", type: DefaultHeaderComponent, isStandalone: true, selector: "rxap-default-header", host: { classAttribute: "grow" }, ngImport: i0, template: "<div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n  @if (collapsed() || isMobile()) {\n    <rxap-sidenav-toggle-button></rxap-sidenav-toggle-button>\n  }\n  <div class=\"grow flex flex-row gap-x-4 items-center\">\n    @for (portal of portals(); track portal) {\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    }\n    <ng-content></ng-content>\n  </div>\n  <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n  <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n  @if (profile(); as profile) {\n    <rxap-user-profile-icon [profile]=\"profile\" class=\"grow-0\"></rxap-user-profile-icon>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: AppsButtonComponent, selector: "rxap-apps-button" }, { kind: "component", type: SettingsButtonComponent, selector: "rxap-settings-button" }, { kind: "component", type: SidenavToggleButtonComponent, selector: "rxap-sidenav-toggle-button" }, { kind: "component", type: UserProfileIconComponent, selector: "rxap-user-profile-icon", inputs: ["profile"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: DefaultHeaderComponent, decorators: [{
             type: Component,
@@ -1163,7 +1170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                         CdkPortalOutlet,
                     ], host: {
                         'class': 'grow',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n  @if (collapsable()) {\n    <rxap-sidenav-toggle-button></rxap-sidenav-toggle-button>\n  }\n  <div class=\"grow flex flex-row gap-x-4 items-center\">\n    @for (portal of portals(); track portal) {\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    }\n    <ng-content></ng-content>\n  </div>\n  <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n  <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n  @if (profile(); as profile) {\n    <rxap-user-profile-icon [profile]=\"profile\" class=\"grow-0\"></rxap-user-profile-icon>\n  }\n</div>\n" }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full flex flex-row gap-x-4 justify-between items-center\">\n  @if (collapsed() || isMobile()) {\n    <rxap-sidenav-toggle-button></rxap-sidenav-toggle-button>\n  }\n  <div class=\"grow flex flex-row gap-x-4 items-center\">\n    @for (portal of portals(); track portal) {\n      <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n    }\n    <ng-content></ng-content>\n  </div>\n  <rxap-apps-button class=\"grow-0\"></rxap-apps-button>\n  <rxap-settings-button class=\"grow-0\"></rxap-settings-button>\n  @if (profile(); as profile) {\n    <rxap-user-profile-icon [profile]=\"profile\" class=\"grow-0\"></rxap-user-profile-icon>\n  }\n</div>\n" }]
         }] });
 
 function provideLayout(...additionalProviders) {