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

package/docs/wiki/TypeAlias.DefaultHeaderItemComponent.md

@@ -4,4 +4,4 @@
 
 > **DefaultHeaderItemComponent**: `ComponentType`\<`unknown`\>
 
-Defined in: [types.ts:17](https://gitlab.com/rxap/packages/-/blob/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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/1a1dfaee7f5f25091f01e97dac74f87a80699213/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.1
+# @rxap/layout v19.1.0-dev.2
 
 ## Classes
 

package/fesm2022/rxap-layout.mjs

@@ -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 {
@@ -1143,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);
@@ -1151,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,
@@ -1164,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) {