@tilde-nlp/ngx-menu 6.1.6 → 6.1.8

package/fesm2022/tilde-nlp-ngx-menu.mjs

@@ -1,25 +1,25 @@
 import * as i0 from '@angular/core';
-import { Injectable, Optional, Inject, Component, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+import { Injectable, Optional, Inject, Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
+import * as i2 from '@tilde-nlp/ngx-common';
+import { ResolutionHelper, PlausibleModule } from '@tilde-nlp/ngx-common';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { map, BehaviorSubject, filter } from 'rxjs';
 import * as i1 from '@tilde-nlp/ngx-strapi';
 import { STRAPI_API_CONFIG_TOKEN } from '@tilde-nlp/ngx-strapi';
 import { CollectionTypes } from '@tilde-nlp/strapi-models';
-import * as i2 from '@tilde-nlp/ngx-common';
-import { PlausibleModule } from '@tilde-nlp/ngx-common';
-import * as i2$2 from '@ngbracket/ngx-layout/flex';
+import * as i4 from '@ngbracket/ngx-layout/flex';
+import * as i5 from '@ngbracket/ngx-layout/extended';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i8$1 from '@angular/material/button';
+import * as i9 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i9 from '@angular/material/menu';
+import * as i10 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i4 from '@angular/material/divider';
-import * as i3$1 from '@ngbracket/ngx-layout/extended';
-import * as i5 from '@angular/material/tooltip';
+import * as i4$1 from '@angular/material/divider';
+import * as i5$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i8 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -388,7 +388,7 @@ class MenuItemLinkComponent {
             i0.ɵɵproperty("ngIf", ctx.showIcons && ctx.menuItem.icon);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.labelsVisible);
-        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i3$1.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.mobile[_ngcontent-%COMP%]   .menu-item-title[_ngcontent-%COMP%]{margin-left:5px}"] }); }
+        } }, dependencies: [i4.DefaultLayoutDirective, i4.DefaultLayoutAlignDirective, i5.DefaultClassDirective, i3.NgIf, i5$1.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}.mobile[_ngcontent-%COMP%]   .menu-item-title[_ngcontent-%COMP%]{margin-left:5px}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
         type: Component,
@@ -406,7 +406,7 @@ class MenuItemLinkComponent {
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemLinkComponent, { className: "MenuItemLinkComponent", filePath: "lib\\components\\menu-item-link\\menu-item-link.component.ts", lineNumber: 10 }); })();
 
-const _c0$3 = a0 => ({ menuItem: a0 });
+const _c0$1 = a0 => ({ menuItem: a0 });
 function MenuItemListComponent_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 6);
     i0.ɵɵtext(1);
@@ -430,7 +430,7 @@ function MenuItemListComponent_ng_container_3_Template(rf, ctx) { if (rf & 1) {
     const itemWithChildren_r3 = i0.ɵɵreference(5);
     const menuItemLink_r4 = i0.ɵɵreference(7);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", !menuItem_r2.showChildren || !menuItem_r2.children || (menuItem_r2 == null ? null : menuItem_r2.children == null ? null : menuItem_r2.children.length) === 0 ? menuItemLink_r4 : itemWithChildren_r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$3, menuItem_r2));
+    i0.ɵɵproperty("ngTemplateOutlet", !menuItem_r2.showChildren || !menuItem_r2.children || (menuItem_r2 == null ? null : menuItem_r2.children == null ? null : menuItem_r2.children.length) === 0 ? menuItemLink_r4 : itemWithChildren_r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0$1, menuItem_r2));
 } }
 function MenuItemListComponent_ng_template_4_ng_container_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
@@ -470,11 +470,11 @@ function MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Tem
 } if (rf & 2) {
     const menuItem_r6 = i0.ɵɵnextContext(2).menuItem;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("ngClass.lt-md", "mobile-child-list")("items", menuItem_r6.children)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem);
+    i0.ɵɵproperty("items", menuItem_r6.children)("direction", ctx_r0.direction)("labelsVisible", ctx_r0.labelsVisible)("activeItem", ctx_r0.activeItem);
 } }
 function MenuItemListComponent_ng_template_4_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Template, 1, 5, "menu-item-list", 15);
+    i0.ɵɵtemplate(1, MenuItemListComponent_ng_template_4_ng_container_4_menu_item_list_1_Template, 1, 4, "menu-item-list", 15);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const menuItem_r6 = i0.ɵɵnextContext().menuItem;
@@ -539,7 +539,7 @@ class MenuItemListComponent {
         this.toggleExpand.next(menuItem);
     }
     static { this.ɵfac = function MenuItemListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemListComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 8, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", "class", "menu-item-list-title", 4, "ngIf"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", "fxLayoutGap", "0.375rem", 1, "text-m", "menu-item", 3, "click", "ngClass.lt-md", "fxLayout", "matTooltip", "fxLayoutAlign"], [4, "ngIf"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons", 4, "ngIf"], [1, "material-icons"], ["class", "child-list", 3, "ngClass.lt-md", "items", "direction", "labelsVisible", "activeItem", 4, "ngIf"], [1, "child-list", 3, "ngClass.lt-md", "items", "direction", "labelsVisible", "activeItem"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemListComponent, selectors: [["menu-item-list"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", items: "items", menuItemGroup: "menuItemGroup" }, outputs: { toggleExpand: "toggleExpand" }, decls: 8, vars: 3, consts: [["itemWithChildren", ""], ["menuItemLink", ""], [1, "menu-list-wrapper"], ["fxLayoutAlign", "start center", "class", "menu-item-list-title", 4, "ngIf"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["fxLayoutAlign", "start center", 1, "menu-item-list-title"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", "fxLayoutGap", "0.375rem", 1, "text-m", "menu-item", 3, "click", "ngClass.lt-md", "fxLayout", "matTooltip", "fxLayoutAlign"], [4, "ngIf"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"], ["class", "material-icons", 4, "ngIf"], [1, "material-icons"], ["class", "child-list", 3, "items", "direction", "labelsVisible", "activeItem", 4, "ngIf"], [1, "child-list", 3, "items", "direction", "labelsVisible", "activeItem"], [3, "ngClass.lt-md", "menuItem", "direction", "labelsVisible", "activeItem", "showIcons"]], template: function MenuItemListComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2);
             i0.ɵɵtemplate(1, MenuItemListComponent_div_1_Template, 3, 3, "div", 3);
             i0.ɵɵelementStart(2, "div", 4);
@@ -553,11 +553,11 @@ class MenuItemListComponent {
             i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.items);
-        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i3$1.DefaultClassDirective, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5.MatTooltip, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block}  .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}  .collapsed .menu-list-wrapper,   .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}  .collapsed .menu-item{display:flex!important;place-content:center center!important}  .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%]     .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%]     .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content{display:block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%]   .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem}  .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}  .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.mob-menu-item[_ngcontent-%COMP%]{margin-top:16px}"] }); }
+        } }, dependencies: [i4.DefaultLayoutDirective, i4.DefaultLayoutGapDirective, i4.DefaultLayoutAlignDirective, i5.DefaultClassDirective, i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i5$1.MatTooltip, MenuItemListComponent, MenuIconComponent, MenuItemLinkComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{display:inline-block}  .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}  .collapsed .menu-list-wrapper,   .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}  .collapsed .menu-item{display:flex!important;place-content:center center!important}  .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%]     .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}[_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item mat-icon, [_nghost-%COMP%]     .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}[_nghost-%COMP%]     .menu-list-wrapper .menu-item span{display:inline-block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content{display:block}[_nghost-%COMP%]     .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}.child-list[_nghost-%COMP%]{margin-bottom:1rem}.child-list[_nghost-%COMP%]   .menu-item[_ngcontent-%COMP%] + .menu-item[_ngcontent-%COMP%]{margin-top:.5rem}  .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}  .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemListComponent, [{
         type: Component,
-        args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n  <div *ngIf=\"titleKey && showTitle && labelsVisible\" fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n    {{ titleKey | translate }}\r\n  </div>\r\n  <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n    <ng-container *ngFor=\"let menuItem of items\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? menuItemLink : itemWithChildren; context: {menuItem: menuItem}\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n  <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n    [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n    [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" fxLayoutGap=\"0.375rem\"\r\n    [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n    <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n      <tld-menu-icon  [menuItem]=\"menuItem\"></tld-menu-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"labelsVisible\">\r\n      <span class=\"menu-item-title\">\r\n        <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n      <span class=\"material-icons\" *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n        {{ menuItem.expanded ? 'arrow_drop_up' : 'arrow_drop_down' }}\r\n      </span>\r\n    </ng-container>\r\n  </button>\r\n  <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n    <menu-item-list [ngClass.lt-md]=\"'mobile-child-list'\" class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n      [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n    </menu-item-list>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n  <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n    [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>", styles: [":host{display:inline-block}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}.mob-menu-item{margin-top:16px}\n"] }]
+        args: [{ selector: 'menu-item-list', template: "<div class=\"menu-list-wrapper\">\r\n  <div *ngIf=\"titleKey && showTitle && labelsVisible\" fxLayoutAlign=\"start center\" class=\"menu-item-list-title\">\r\n    {{ titleKey | translate }}\r\n  </div>\r\n  <div fxLayout=\"column\" [fxLayoutAlign]=\"menuLayoutDirection\" class=\"menu-item-list\">\r\n    <ng-container *ngFor=\"let menuItem of items\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"!menuItem.showChildren || !menuItem.children || menuItem?.children?.length === 0 ? menuItemLink : itemWithChildren; context: {menuItem: menuItem}\">\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #itemWithChildren let-menuItem=\"menuItem\">\r\n  <button [attr.id]=\"menuItem.customId\" [ngClass.lt-md]=\"'mob-menu-item'\" [fxLayout]=\"menuItemLayout\" class=\"text-m menu-item\"\r\n    [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\" [class.menu-labels-visible]=\"labelsVisible\"\r\n    [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" fxLayoutGap=\"0.375rem\"\r\n    [class.active-menu-item]=\"activeItem?.link && menuItem === activeItem\" (click)=\"toggleItemExpand($event,menuItem)\">\r\n    <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n      <tld-menu-icon  [menuItem]=\"menuItem\"></tld-menu-icon>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"labelsVisible\">\r\n      <span class=\"menu-item-title\">\r\n        <span class=\"title-content\">{{ menuItem.title | translate }}</span></span>\r\n      <span class=\"material-icons\" *ngIf=\"menuItem.showChildren && menuItem.children\">\r\n        {{ menuItem.expanded ? 'arrow_drop_up' : 'arrow_drop_down' }}\r\n      </span>\r\n    </ng-container>\r\n  </button>\r\n  <ng-container *ngIf=\"menuItem.showChildren && menuItem.expanded && labelsVisible\">\r\n    <menu-item-list class=\"child-list\" *ngIf=\"menuItem.children && menuItem.children.length\" [items]=\"menuItem.children\"\r\n      [direction]=\"direction\" [labelsVisible]=\"labelsVisible\" [activeItem]=\"activeItem\">\r\n    </menu-item-list>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #menuItemLink let-menuItem=\"menuItem\">\r\n  <tld-menu-item-link [ngClass.lt-md]=\"'mob-menu-item'\" [menuItem]=\"menuItem\" [direction]=\"direction\" [labelsVisible]=\"labelsVisible\"\r\n    [activeItem]=\"activeItem\" [showIcons]=\"showIcons\"></tld-menu-item-link>\r\n</ng-template>", styles: [":host{display:inline-block}::ng-deep .collapsed .menu-item-list{display:flex!important;justify-content:center!important;align-items:center!important}::ng-deep .collapsed .menu-list-wrapper,::ng-deep .collapsed tld-menu-item-link{display:flex!important;justify-content:center!important}::ng-deep .collapsed .menu-item{display:flex!important;place-content:center center!important}::ng-deep .collapsed tld-menu-item-link:not(:first-child){margin-top:16px!important}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-30);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):not(.active-menu-item):hover{background-color:var(--base-70)!important}:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item mat-icon,:host ::ng-deep .menu-list-wrapper .menu-item.active-menu-item:hover{font-weight:600}:host ::ng-deep .menu-list-wrapper .menu-item span{display:inline-block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title{display:flex;flex-direction:row;align-items:start;width:100%}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content{display:block}:host ::ng-deep .menu-list-wrapper .menu-item .menu-item-title .title-content:before{display:block;content:attr(content);font-weight:600;height:0;overflow:hidden;visibility:hidden}:host.child-list{margin-bottom:1rem}:host.child-list .menu-item+.menu-item{margin-top:.5rem}::ng-deep .menu-tooltip{left:.625rem;font-family:Roboto;font-style:normal;font-weight:400;font-size:.75rem;line-height:1.25rem;color:var(--base-70);border-radius:.25rem;position:relative}::ng-deep .menu-tooltip:after{width:0;height:0;content:\"\";position:absolute;border-left:.5rem solid transparent;border-right:.5rem solid transparent;border-bottom:.5rem solid var(--menu-border-dark-color);left:-.75rem;top:calc(50% - .25rem);transform:rotate(270deg);overflow:initial}\n"] }]
     }], null, { direction: [{
             type: Input
         }], labelsVisible: [{
@@ -583,7 +583,7 @@ function MenuColumnsComponent_ng_container_0_menu_item_list_1_Template(rf, ctx)
 } if (rf & 2) {
     const group_r3 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("activeItem", ctx_r1.activeItem)("direction", ctx_r1.direction)("labelsVisible", ctx_r1.labelsVisible)("menuItemGroup", group_r3)("items", group_r3.items);
+    i0.ɵɵproperty("activeItem", ctx_r1.activeItem)("direction", ctx_r1.direction)("labelsVisible", ctx_r1.isOpen)("menuItemGroup", group_r3)("items", group_r3.items);
 } }
 function MenuColumnsComponent_ng_container_0_div_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 4);
@@ -604,6 +604,9 @@ function MenuColumnsComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
 class MenuColumnsComponent {
     get active() { return this._active; }
     set active(value) {
+        if (this.toggleOnMobileSelect()) {
+            this.toggleCollapseEvent.emit();
+        }
         this._active = value;
         if (!value) {
             this.activeItem = undefined;
@@ -617,23 +620,19 @@ class MenuColumnsComponent {
         this.menuSharedConfig = menuSharedConfig;
         this.menuItemsService = menuItemsService;
         this.direction = MenuLayoutDirection.column;
-        this.labelsVisible = true;
+        this.isOpen = true;
         this.toggleCollapseEvent = new EventEmitter();
-        this.subscriptions = [];
     }
     ngOnInit() {
         this.activeItem = this.active.root;
     }
-    ngOnDestroy() {
-        this.subscriptions.forEach(sub => sub.unsubscribe());
-    }
     elementExpanded(element) {
         if (!this.active || !element) {
             this.activeItem = undefined;
             return;
         }
         // if menu is collapsed and chilren are expandable, we should open menu
-        if (element.showChildren && !this.labelsVisible) {
+        if (element.showChildren && !this.isOpen) {
             this.toggleCollapseEvent.emit();
         }
         if (element.showChildren && element.expanded && element === this.active.root) {
@@ -643,16 +642,19 @@ class MenuColumnsComponent {
             this.activeItem = this.active.root;
         }
     }
+    toggleOnMobileSelect() {
+        return this.isOpen && ResolutionHelper.isMobileRes() && (this.active && Object.values(this.active)?.length > 0);
+    }
     static { this.ɵfac = function MenuColumnsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuColumnsComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(MENU_SHARED_CONFIG, 8), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuColumnsComponent, selectors: [["menu-columns"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", active: "active" }, outputs: { toggleCollapseEvent: "toggleCollapseEvent" }, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "toggleExpand", 4, "ngIf"], ["class", "divider", 4, "ngIf"], [3, "toggleExpand", "activeItem", "direction", "labelsVisible", "menuItemGroup", "items"], [1, "divider"]], template: function MenuColumnsComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuColumnsComponent, selectors: [["menu-columns"]], inputs: { direction: "direction", isOpen: "isOpen", active: "active" }, outputs: { toggleCollapseEvent: "toggleCollapseEvent" }, decls: 1, vars: 1, consts: [[4, "ngFor", "ngForOf"], [3, "activeItem", "direction", "labelsVisible", "menuItemGroup", "items", "toggleExpand", 4, "ngIf"], ["class", "divider", 4, "ngIf"], [3, "toggleExpand", "activeItem", "direction", "labelsVisible", "menuItemGroup", "items"], [1, "divider"]], template: function MenuColumnsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("ngForOf", ctx.mergedGroups);
-        } }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatDivider, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%]   menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}"] }); }
+        } }, dependencies: [i3.NgForOf, i3.NgIf, i4$1.MatDivider, MenuItemListComponent], styles: ["[_nghost-%COMP%]{display:inline-block}[_nghost-%COMP%]   menu-item-list[_ngcontent-%COMP%]{display:block}.divider[_ngcontent-%COMP%]{margin:10px 0}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuColumnsComponent, [{
         type: Component,
-        args: [{ selector: 'menu-columns', template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n    <menu-item-list *ngIf=\"group.items.length\" [activeItem]=\"activeItem\" [direction]=\"direction\"\r\n        (toggleExpand)=\"elementExpanded($event)\" [labelsVisible]=\"labelsVisible\" [menuItemGroup]=\"group\"\r\n        [items]=\"group.items\">\r\n    </menu-item-list>\r\n    <div class=\"divider\" *ngIf=\"group.bottomDivider && group.items.length\">\r\n        <mat-divider></mat-divider>\r\n    </div>\r\n</ng-container>", styles: [":host{display:inline-block}:host menu-item-list{display:block}.divider{margin:10px 0}\n"] }]
+        args: [{ selector: 'menu-columns', template: "<ng-container *ngFor=\"let group of mergedGroups\">\r\n    <menu-item-list *ngIf=\"group.items.length\" [activeItem]=\"activeItem\" [direction]=\"direction\"\r\n        (toggleExpand)=\"elementExpanded($event)\" [labelsVisible]=\"isOpen\" [menuItemGroup]=\"group\"\r\n        [items]=\"group.items\">\r\n    </menu-item-list>\r\n    <div class=\"divider\" *ngIf=\"group.bottomDivider && group.items.length\">\r\n        <mat-divider></mat-divider>\r\n    </div>\r\n</ng-container>", styles: [":host{display:inline-block}:host menu-item-list{display:block}.divider{margin:10px 0}\n"] }]
     }], () => [{ type: i1$1.Router }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -660,7 +662,7 @@ class MenuColumnsComponent {
                 args: [MENU_SHARED_CONFIG]
             }] }, { type: MenuItemsService }], { direction: [{
             type: Input
-        }], labelsVisible: [{
+        }], isOpen: [{
             type: Input
         }], toggleCollapseEvent: [{
             type: Output
@@ -670,161 +672,208 @@ class MenuColumnsComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuColumnsComponent, { className: "MenuColumnsComponent", filePath: "lib\\components\\menu-columns\\menu-columns.component.ts", lineNumber: 16 }); })();
 
 const _forTrack0 = ($index, $item) => $item.label;
-const _c0$2 = (a0, a1, a2, a3) => ({ icon: a0, isIconCustom: a1, isIconOutlined: a2, label: a3 });
-function SideNavMenuComponent_a_3_Template(rf, ctx) { if (rf & 1) {
+const _c0 = (a0, a1, a2, a3) => ({ icon: a0, isIconCustom: a1, isIconOutlined: a2, label: a3 });
+function SideNavMenuComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 13);
+    i0.ɵɵelementStart(0, "div", 14)(1, "a", 15);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵlistener("click", function SideNavMenuComponent_div_0_Template_a_click_1_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.logoClick($event)); });
+    i0.ɵɵelement(3, "img", 16);
+    i0.ɵɵelementStart(4, "span", 17);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "button", 9);
+    i0.ɵɵpipe(7, "translate");
+    i0.ɵɵlistener("click", function SideNavMenuComponent_div_0_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCollapse()); });
+    i0.ɵɵelementStart(8, "mat-icon");
+    i0.ɵɵtext(9, "menu");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("fxHide", !ctx_r2.collapsed);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("libPlausibleEvent", ctx_r2.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r2.baseUrl, i0.ɵɵsanitizeUrl);
+    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(2, 8, "MENU.ARIA_LABELS.LOGO"));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("src", ctx_r2.menuLogoImage, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.productName, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("libPlausibleEvent", ctx_r2.collapsed ? ctx_r2.EXPAND_PLAUSIBLE_EVENT : ctx_r2.COLLAPSE_PLAUSIBLE_EVENT);
+    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(7, 10, "ARIA_LABELS.MENU_TOGGLER"));
+} }
+function SideNavMenuComponent_a_4_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 15);
     i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("click", function SideNavMenuComponent_a_3_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.logoClick($event)); });
-    i0.ɵɵelement(2, "img", 14);
-    i0.ɵɵelementEnd();
+    i0.ɵɵlistener("click", function SideNavMenuComponent_a_4_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.logoClick($event)); });
+    i0.ɵɵelement(2, "img", 16);
+    i0.ɵɵelementStart(3, "span", 17);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("libPlausibleEvent", ctx_r2.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r2.baseUrl, i0.ɵɵsanitizeUrl);
-    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 4, "MENU.ARIA_LABELS.LOGO"));
+    i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(1, 5, "MENU.ARIA_LABELS.LOGO"));
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("src", ctx_r2.menuLogoImage, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.productName, " ");
+} }
+function SideNavMenuComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1, "close");
+    i0.ɵɵelementEnd();
 } }
-function SideNavMenuComponent_button_10_ng_container_4_mat_icon_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 20);
+function SideNavMenuComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
+} }
+function SideNavMenuComponent_button_11_ng_container_4_mat_icon_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon", 23);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate("keyboard_arrow_down");
 } }
-function SideNavMenuComponent_button_10_ng_container_4_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 20);
+function SideNavMenuComponent_button_11_ng_container_4_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon", 23);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate("keyboard_arrow_up");
 } }
-function SideNavMenuComponent_button_10_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+function SideNavMenuComponent_button_11_ng_container_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "span", 18);
+    i0.ɵɵelementStart(1, "span", 21);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, SideNavMenuComponent_button_10_ng_container_4_mat_icon_3_Template, 2, 1, "mat-icon", 19)(4, SideNavMenuComponent_button_10_ng_container_4_ng_template_4_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(3, SideNavMenuComponent_button_11_ng_container_4_mat_icon_3_Template, 2, 1, "mat-icon", 22)(4, SideNavMenuComponent_button_11_ng_container_4_ng_template_4_Template, 2, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const iconDown_r4 = i0.ɵɵreference(5);
+    const iconDown_r5 = i0.ɵɵreference(5);
     i0.ɵɵnextContext();
-    const state_r5 = i0.ɵɵreference(1);
+    const state_r6 = i0.ɵɵreference(1);
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.username, " ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", state_r5.menuOpen)("ngIfElse", iconDown_r4);
+    i0.ɵɵproperty("ngIf", state_r6.menuOpen)("ngIfElse", iconDown_r5);
 } }
-function SideNavMenuComponent_button_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 15, 2)(2, "div", 16);
+function SideNavMenuComponent_button_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 18, 2)(2, "div", 19);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, SideNavMenuComponent_button_10_ng_container_4_Template, 6, 3, "ng-container", 17);
+    i0.ɵɵtemplate(4, SideNavMenuComponent_button_11_ng_container_4_Template, 6, 3, "ng-container", 20);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    const menu_r6 = i0.ɵɵreference(12);
-    i0.ɵɵproperty("matMenuTriggerFor", menu_r6);
+    const menu_r7 = i0.ɵɵreference(13);
+    i0.ɵɵproperty("matMenuTriggerFor", menu_r7);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.userInitials, " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r2.collapsed);
 } }
-function SideNavMenuComponent_For_14_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function SideNavMenuComponent_For_15_Conditional_0_Conditional_0_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function SideNavMenuComponent_For_14_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 22);
-    i0.ɵɵtemplate(1, SideNavMenuComponent_For_14_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 24);
+function SideNavMenuComponent_For_15_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 25);
+    i0.ɵɵtemplate(1, SideNavMenuComponent_For_15_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext(2).$implicit;
+    const item_r8 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵnextContext();
-    const profileMenuItem_r8 = i0.ɵɵreference(16);
-    i0.ɵɵproperty("href", item_r7.href, i0.ɵɵsanitizeUrl);
+    const profileMenuItem_r9 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("href", item_r8.href, i0.ɵɵsanitizeUrl);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c0$2, item_r7.icon, item_r7.isIconCustom, item_r7.isIconOutlined, item_r7.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c0, item_r8.icon, item_r8.isIconCustom, item_r8.isIconOutlined, item_r8.label));
 } }
-function SideNavMenuComponent_For_14_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function SideNavMenuComponent_For_15_Conditional_0_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function SideNavMenuComponent_For_14_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 23);
-    i0.ɵɵtemplate(1, SideNavMenuComponent_For_14_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 24);
+function SideNavMenuComponent_For_15_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "a", 26);
+    i0.ɵɵtemplate(1, SideNavMenuComponent_For_15_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext(2).$implicit;
+    const item_r8 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵnextContext();
-    const profileMenuItem_r8 = i0.ɵɵreference(16);
-    i0.ɵɵproperty("routerLink", item_r7.href);
+    const profileMenuItem_r9 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("routerLink", item_r8.href);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c0$2, item_r7.icon, item_r7.isIconCustom, item_r7.isIconOutlined, item_r7.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction4(3, _c0, item_r8.icon, item_r8.isIconCustom, item_r8.isIconOutlined, item_r8.label));
 } }
-function SideNavMenuComponent_For_14_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_For_14_Conditional_0_Conditional_0_Template, 2, 8, "a", 22)(1, SideNavMenuComponent_For_14_Conditional_0_Conditional_1_Template, 2, 8, "a", 23);
+function SideNavMenuComponent_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SideNavMenuComponent_For_15_Conditional_0_Conditional_0_Template, 2, 8, "a", 25)(1, SideNavMenuComponent_For_15_Conditional_0_Conditional_1_Template, 2, 8, "a", 26);
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵconditional(item_r7.openInNewTab ? 0 : 1);
+    const item_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵconditional(item_r8.openInNewTab ? 0 : 1);
 } }
-function SideNavMenuComponent_For_14_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function SideNavMenuComponent_For_15_Conditional_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function SideNavMenuComponent_For_14_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 25);
-    i0.ɵɵlistener("click", function SideNavMenuComponent_For_14_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const item_r7 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r7 == null ? null : item_r7.callback()); });
-    i0.ɵɵtemplate(1, SideNavMenuComponent_For_14_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 24);
+function SideNavMenuComponent_For_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵlistener("click", function SideNavMenuComponent_For_15_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const item_r8 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r8 == null ? null : item_r8.callback()); });
+    i0.ɵɵtemplate(1, SideNavMenuComponent_For_15_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext().$implicit;
+    const item_r8 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext();
-    const profileMenuItem_r8 = i0.ɵɵreference(16);
+    const profileMenuItem_r9 = i0.ɵɵreference(17);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c0$2, item_r7.icon, item_r7.isIconCustom, item_r7.isIconOutlined, item_r7.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction4(2, _c0, item_r8.icon, item_r8.isIconCustom, item_r8.isIconOutlined, item_r8.label));
 } }
-function SideNavMenuComponent_For_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_For_14_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_14_Conditional_1_Template, 2, 7, "button", 21);
+function SideNavMenuComponent_For_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SideNavMenuComponent_For_15_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_15_Conditional_1_Template, 2, 7, "button", 24);
 } if (rf & 2) {
-    const item_r7 = ctx.$implicit;
-    i0.ɵɵconditional(item_r7.isLink ? 0 : 1);
+    const item_r8 = ctx.$implicit;
+    i0.ɵɵconditional(item_r8.isLink ? 0 : 1);
 } }
-function SideNavMenuComponent_ng_template_15_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 28);
+function SideNavMenuComponent_ng_template_16_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 31);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r9 = i0.ɵɵnextContext(2);
-    const icon_r11 = ctx_r9.icon;
-    const isIconOutlined_r12 = ctx_r9.isIconOutlined;
-    i0.ɵɵclassProp("material-icons-outlined", isIconOutlined_r12);
+    const ctx_r10 = i0.ɵɵnextContext(2);
+    const icon_r12 = ctx_r10.icon;
+    const isIconOutlined_r13 = ctx_r10.isIconOutlined;
+    i0.ɵɵclassProp("material-icons-outlined", isIconOutlined_r13);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", icon_r11, " ");
+    i0.ɵɵtextInterpolate1(" ", icon_r12, " ");
 } }
-function SideNavMenuComponent_ng_template_15_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 27);
+function SideNavMenuComponent_ng_template_16_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mat-icon", 30);
 } if (rf & 2) {
-    const icon_r11 = i0.ɵɵnextContext(2).icon;
-    i0.ɵɵproperty("svgIcon", icon_r11);
+    const icon_r12 = i0.ɵɵnextContext(2).icon;
+    i0.ɵɵproperty("svgIcon", icon_r12);
 } }
-function SideNavMenuComponent_ng_template_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_15_Conditional_0_Conditional_0_Template, 2, 3, "span", 26)(1, SideNavMenuComponent_ng_template_15_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 27);
+function SideNavMenuComponent_ng_template_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_16_Conditional_0_Conditional_0_Template, 2, 3, "span", 29)(1, SideNavMenuComponent_ng_template_16_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 30);
 } if (rf & 2) {
-    const isIconCustom_r13 = i0.ɵɵnextContext().isIconCustom;
-    i0.ɵɵconditional(!isIconCustom_r13 ? 0 : 1);
+    const isIconCustom_r14 = i0.ɵɵnextContext().isIconCustom;
+    i0.ɵɵconditional(!isIconCustom_r14 ? 0 : 1);
 } }
-function SideNavMenuComponent_ng_template_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_15_Conditional_0_Template, 2, 1);
+function SideNavMenuComponent_ng_template_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_16_Conditional_0_Template, 2, 1);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "translate");
 } if (rf & 2) {
-    const icon_r11 = ctx.icon;
-    const label_r14 = ctx.label;
-    i0.ɵɵconditional(icon_r11 ? 0 : -1);
+    const icon_r12 = ctx.icon;
+    const label_r15 = ctx.label;
+    i0.ɵɵconditional(icon_r12 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r14), "\n");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r15), "\n");
 } }
 class SideNavMenuComponent extends NavBaseComponent {
     #username;
@@ -854,6 +903,7 @@ class SideNavMenuComponent extends NavBaseComponent {
             disableStrapi: false
         };
         this.collapsed = false;
+        this.isMobile = ResolutionHelper.isMobileRes();
         this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
         //#region Plausible event variables for collapse button
         this.COLLAPSE_PLAUSIBLE_EVENT_ID = "collapseMenu";
@@ -889,7 +939,7 @@ class SideNavMenuComponent extends NavBaseComponent {
         if (!this.domService.localStorage) {
             return;
         }
-        this.collapsed = this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' ? true : false;
+        this.collapsed = (this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' || this.isMobile) ? true : false;
     }
     setColapsedFromLocalStorage() {
         if (!this.domService.localStorage) {
@@ -912,48 +962,51 @@ class SideNavMenuComponent extends NavBaseComponent {
         this.userInitials = splittedUsername[0][0] + splittedUsername[1][0];
     }
     static { this.ɵfac = function SideNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SideNavMenuComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i2.DOMService), i0.ɵɵdirectiveInject(MenuItemsService), i0.ɵɵdirectiveInject(MENU_SHARED_CONFIG, 8)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 17, vars: 15, consts: [["menu", "matMenu"], ["profileMenuItem", ""], ["state", "matMenuTrigger"], ["iconDown", ""], ["fxLayout", "column", 1, "menu-container"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", "fxFlex", "", 1, "menu-wrapper"], ["role", "navigation", "fxFlex", "", 3, "toggleCollapseEvent", "direction", "labelsVisible", "active"], ["class", "profile-wrapper", 3, "matMenuTriggerFor", 4, "ngIf"], [1, "profile-menu"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [1, "profile-name"], ["class", "spin", 4, "ngIf", "ngIfElse"], [1, "spin"], ["mat-menu-item", "", 1, "profile-option"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "href"], [1, "mat-mdc-menu-item", 3, "routerLink"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], [1, "material-icons", "profile-option-icon", 3, "material-icons-outlined"], [1, "profile-option-icon", 3, "svgIcon"], [1, "material-icons", "profile-option-icon"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 17, consts: [["menu", "matMenu"], ["profileMenuItem", ""], ["state", "matMenuTrigger"], ["iconDown", ""], ["class", "mobile-header", 3, "fxHide", 4, "ngIf"], ["fxLayout", "column", 1, "menu-container", 3, "ngClass.lt-sm"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", 1, "menu-container-header", 3, "fxLayoutAlign"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "libPlausibleEvent", "href", "click", 4, "ngIf"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["fxLayout", "column", "fxFlex", "", 1, "menu-wrapper"], ["role", "navigation", "fxFlex", "", 3, "toggleCollapseEvent", "direction", "isOpen", "active"], ["class", "profile-wrapper", 3, "matMenuTriggerFor", 4, "ngIf"], [1, "profile-menu"], [1, "mobile-header", 3, "fxHide"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["height", "40", "width", "40", "alt", "logo", 1, "menu-logo", 3, "src"], [1, "menu-product-name"], [1, "profile-wrapper", 3, "matMenuTriggerFor"], [1, "profile-icon"], [4, "ngIf"], [1, "profile-name"], ["class", "spin", 4, "ngIf", "ngIfElse"], [1, "spin"], ["mat-menu-item", "", 1, "profile-option"], ["target", "_blank", 1, "mat-mdc-menu-item", 3, "href"], [1, "mat-mdc-menu-item", 3, "routerLink"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], [1, "material-icons", "profile-option-icon", 3, "material-icons-outlined"], [1, "profile-option-icon", 3, "svgIcon"], [1, "material-icons", "profile-option-icon"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "div", 6);
-            i0.ɵɵtemplate(3, SideNavMenuComponent_a_3_Template, 3, 6, "a", 7);
-            i0.ɵɵelementStart(4, "button", 8);
-            i0.ɵɵpipe(5, "translate");
-            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
-            i0.ɵɵelementStart(6, "mat-icon");
-            i0.ɵɵtext(7);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(8, "div", 9)(9, "menu-columns", 10);
-            i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
+            i0.ɵɵtemplate(0, SideNavMenuComponent_div_0_Template, 10, 12, "div", 4);
+            i0.ɵɵelementStart(1, "div", 5)(2, "div", 6)(3, "div", 7);
+            i0.ɵɵtemplate(4, SideNavMenuComponent_a_4_Template, 5, 7, "a", 8);
+            i0.ɵɵelementStart(5, "button", 9);
+            i0.ɵɵpipe(6, "translate");
+            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
+            i0.ɵɵtemplate(7, SideNavMenuComponent_Conditional_7_Template, 2, 0, "mat-icon")(8, SideNavMenuComponent_Conditional_8_Template, 2, 1, "mat-icon");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "div", 10)(10, "menu-columns", 11);
+            i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(10, SideNavMenuComponent_button_10_Template, 5, 3, "button", 11);
-            i0.ɵɵelementStart(11, "mat-menu", 12, 0);
-            i0.ɵɵrepeaterCreate(13, SideNavMenuComponent_For_14_Template, 2, 1, null, null, _forTrack0);
+            i0.ɵɵtemplate(11, SideNavMenuComponent_button_11_Template, 5, 3, "button", 12);
+            i0.ɵɵelementStart(12, "mat-menu", 13, 0);
+            i0.ɵɵrepeaterCreate(14, SideNavMenuComponent_For_15_Template, 2, 1, null, null, _forTrack0);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(15, SideNavMenuComponent_ng_template_15_Template, 3, 4, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(16, SideNavMenuComponent_ng_template_16_Template, 3, 4, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.isMobile);
+            i0.ɵɵadvance();
             i0.ɵɵstyleProp("width", ctx.sideNavWidth);
             i0.ɵɵclassProp("collapsed", ctx.collapsed);
+            i0.ɵɵproperty("ngClass.lt-sm", "mobile");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("fxLayoutAlign", ctx.collapsed ? "center center" : "space-between center");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.collapsed);
             i0.ɵɵadvance();
             i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
-            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(5, 13, "ARIA_LABELS.MENU_TOGGLER"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
+            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(6, 15, "ARIA_LABELS.MENU_TOGGLER"));
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("direction", ctx.direction)("labelsVisible", !ctx.collapsed)("active", ctx.active);
+            i0.ɵɵconditional(ctx.isMobile ? 7 : 8);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("direction", ctx.direction)("isOpen", !ctx.collapsed)("active", ctx.active);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.userInitials);
             i0.ɵɵadvance(3);
             i0.ɵɵrepeater(ctx.menuSettings.userOptions);
-        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i8$1.MatIconButton, i9.MatMenu, i9.MatMenuItem, i9.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed)   .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%]   .divider[_ngcontent-%COMP%]{width:100%}.menu-container[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;margin:32px 16px}.menu-container[_ngcontent-%COMP%]   .profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.menu-container[_ngcontent-%COMP%]   .profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_nghost-%COMP%]     .collapsed .profile-wrapper{left:8px!important}[_nghost-%COMP%]     .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%]     .child-list .menu-item{padding:8px 46px!important}[_nghost-%COMP%]     .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%]     .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%]     .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}  .mobile-child-list{margin-left:25px!important}  .cdk-overlay-container .profile-menu{margin:10px 0!important}  .mat-mdc-menu-item .mat-icon{margin-right:5px!important}  .collapsed .profile-wrapper{justify-content:center!important}  .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}  .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
+        } }, dependencies: [i4.DefaultLayoutDirective, i4.DefaultLayoutAlignDirective, i4.FlexFillDirective, i4.DefaultFlexDirective, i5.DefaultShowHideDirective, i5.DefaultClassDirective, i1$1.RouterLink, i3.NgIf, i3.NgTemplateOutlet, i2$1.MatIcon, i9.MatIconButton, i10.MatMenu, i10.MatMenuItem, i10.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: ["a[_ngcontent-%COMP%]{text-decoration:none}.mobile-header[_ngcontent-%COMP%]{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed[_ngcontent-%COMP%]{display:none!important}.mobile.menu-container[_ngcontent-%COMP%]:not(.collapsed){display:block!important;position:absolute;min-width:100vw;min-height:100vh;z-index:1000}.mobile[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{position:relative}.mobile[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{position:absolute!important;right:0}.menu-product-name[_ngcontent-%COMP%]{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--primary-accent-darker)}.menu-container[_ngcontent-%COMP%]{max-height:100vh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0;max-height:40px}.menu-container.collapsed[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0 32px!important}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed)   .menu-logo[_ngcontent-%COMP%]{margin-left:16px;max-width:100%}.menu-container[_ngcontent-%COMP%]   .divider[_ngcontent-%COMP%]{width:100%}.menu-container[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;margin:32px 16px}.menu-container[_ngcontent-%COMP%]   .profile-icon[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.menu-container[_ngcontent-%COMP%]   .profile-name[_ngcontent-%COMP%]{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon[_ngcontent-%COMP%]{vertical-align:middle;margin:0 5px 5px 0}[_nghost-%COMP%]     .collapsed .profile-wrapper{left:8px!important}[_nghost-%COMP%]     .menu-item{display:flex;padding:16px!important;border-radius:4px!important}[_nghost-%COMP%]     .child-list .menu-item{padding:8px 46px!important}[_nghost-%COMP%]     .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}[_nghost-%COMP%]     .active-menu-item{background-color:var(--base-95)!important}[_nghost-%COMP%]     .menu-item-title{margin-left:12px}tld-menu-icon[_ngcontent-%COMP%]{margin-right:10px}.spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spinArrow .3s forwards}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}[_nghost-%COMP%]     .mobile .child-list .menu-item{padding:8px 54px!important}  .cdk-overlay-container .profile-menu{margin:10px 0!important}  .mat-mdc-menu-item .mat-icon{margin-right:5px!important}  .collapsed .profile-wrapper{justify-content:center!important}  .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}  .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes _ngcontent-%COMP%_spinArrow{to{transform:rotate(180deg)}}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
         type: Component,
-        args: [{ selector: 'lib-side-nav-menu', template: "<div class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n  <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n    <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n      <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n        [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n      >\r\n        <img height=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n      </a>\r\n      \r\n      <button\r\n        mat-icon-button\r\n        class=\"toggler\"\r\n        [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n        [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n        (click)=\"toggleCollapse()\"\r\n      >\r\n        <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n      </button>\r\n    </div>\r\n   \r\n    <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [labelsVisible]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n    </div>\r\n\r\n\r\n    <button *ngIf=\"userInitials\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        {{userInitials}}\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!collapsed\">\r\n        <span class=\"profile-name\">\r\n          {{ username }}\r\n        </span>\r\n  \r\n        <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n        <ng-template #iconDown>\r\n          <mat-icon class=\"spin\">{{\"keyboard_arrow_up\" }}</mat-icon>\r\n        </ng-template>\r\n      </ng-container>\r\n    </button>\r\n\r\n    <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n      @for (item of menuSettings.userOptions; track item.label) {\r\n        @if (item.isLink) {\r\n          @if (item.openInNewTab) {\r\n            <a class=\"mat-mdc-menu-item\" [href]=\"item.href\" target=\"_blank\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          } @else {\r\n            <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.href\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          }\r\n        } @else {\r\n          <button\r\n          mat-menu-item\r\n          class=\"profile-option\"\r\n          (click)=\"item?.callback()\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n          </ng-container>\r\n        </button>\r\n        }\r\n      }\r\n    </mat-menu>\r\n  </div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-isIconCustom=\"isIconCustom\" let-isIconOutlined=\"isIconOutlined\" let-label=\"label\">\r\n  @if (icon) {\r\n    @if (!isIconCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"isIconOutlined\">\r\n        {{icon}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon\"></mat-icon>\r\n    }\r\n  }\r\n  {{ label | translate }}\r\n</ng-template>", styles: [".menu-container{white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;margin:32px 16px}.menu-container .profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.menu-container .profile-name{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .collapsed .profile-wrapper{left:8px!important}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 46px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}::ng-deep .mobile-child-list{margin-left:25px!important}::ng-deep .cdk-overlay-container .profile-menu{margin:10px 0!important}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
+        args: [{ selector: 'lib-side-nav-menu', template: "<div *ngIf=\"isMobile\" [fxHide]=\"!collapsed\" class=\"mobile-header\">\r\n    <a [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n      [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n    >\r\n      <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n      <span class=\"menu-product-name\">\r\n        {{ productName }}\r\n      </span>\r\n    </a>\r\n    \r\n    <button\r\n      mat-icon-button\r\n      class=\"toggler\"\r\n      [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n      [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n      (click)=\"toggleCollapse()\"\r\n    >\r\n      <mat-icon>menu</mat-icon>\r\n    </button>\r\n</div>\r\n\r\n<div [ngClass.lt-sm]=\"'mobile'\" class=\"menu-container\" [style.width]=\"sideNavWidth\" fxLayout=\"column\" [class.collapsed]=\"collapsed\">\r\n  <div class=\"content\" fxLayout=\"column\" fxFlexFill>\r\n    <div class=\"menu-container-header\" fxLayout=\"row\" [fxLayoutAlign]=\"collapsed ? 'center center' : 'space-between center'\">\r\n      <a *ngIf=\"!collapsed\" [libPlausibleEvent]=\"LOGOCLICK_PLAUSIBLE_EVENT\" fxFlex=\"3.125em\" [href]=\"baseUrl\"\r\n        [attr.aria-label]=\"'MENU.ARIA_LABELS.LOGO' | translate\" (click)=\"logoClick($event)\" fxLayoutAlign=\"start center\"\r\n      >\r\n        <img height=\"40\" width=\"40\" class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"logo\" />\r\n        <span class=\"menu-product-name\">\r\n          {{ productName }}\r\n        </span>\r\n      </a>\r\n      \r\n      <button\r\n        mat-icon-button\r\n        class=\"toggler\"\r\n        [attr.aria-label]=\"'ARIA_LABELS.MENU_TOGGLER' | translate\"\r\n        [libPlausibleEvent]=\"collapsed ? EXPAND_PLAUSIBLE_EVENT : COLLAPSE_PLAUSIBLE_EVENT\"\r\n        (click)=\"toggleCollapse()\"\r\n      >\r\n        @if (isMobile) {\r\n          <mat-icon>close</mat-icon>\r\n        } @else {\r\n          <mat-icon>{{ collapsed ? 'keyboard_double_arrow_right' : 'keyboard_double_arrow_left' }}</mat-icon>\r\n        }\r\n      </button>\r\n    </div>\r\n   \r\n    <div class=\"menu-wrapper\" fxLayout=\"column\" fxFlex>\r\n      <menu-columns (toggleCollapseEvent)=\"toggleCollapse()\" [direction]=\"direction\" role=\"navigation\" fxFlex [isOpen]=\"!collapsed\"\r\n        [active]=\"active\"></menu-columns>\r\n    </div>\r\n\r\n\r\n    <button *ngIf=\"userInitials\" #state=\"matMenuTrigger\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        {{userInitials}}\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!collapsed\">\r\n        <span class=\"profile-name\">\r\n          {{ username }}\r\n        </span>\r\n  \r\n        <mat-icon *ngIf=\"state.menuOpen; else iconDown\" class=\"spin\">{{\"keyboard_arrow_down\"}}</mat-icon>\r\n\r\n        <ng-template #iconDown>\r\n          <mat-icon class=\"spin\">{{\"keyboard_arrow_up\" }}</mat-icon>\r\n        </ng-template>\r\n      </ng-container>\r\n    </button>\r\n\r\n    <mat-menu #menu=\"matMenu\" class=\"profile-menu\">\r\n      @for (item of menuSettings.userOptions; track item.label) {\r\n        @if (item.isLink) {\r\n          @if (item.openInNewTab) {\r\n            <a class=\"mat-mdc-menu-item\" [href]=\"item.href\" target=\"_blank\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          } @else {\r\n            <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.href\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          }\r\n        } @else {\r\n          <button\r\n            mat-menu-item\r\n            class=\"profile-option\"\r\n            (click)=\"item?.callback()\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, isIconCustom: item.isIconCustom, isIconOutlined: item.isIconOutlined, label: item.label }\">\r\n          </ng-container>\r\n        </button>\r\n        }\r\n      }\r\n    </mat-menu>\r\n  </div>\r\n\r\n<ng-template #profileMenuItem let-icon=\"icon\" let-isIconCustom=\"isIconCustom\" let-isIconOutlined=\"isIconOutlined\" let-label=\"label\">\r\n  @if (icon) {\r\n    @if (!isIconCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"isIconOutlined\">\r\n        {{icon}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon\"></mat-icon>\r\n    }\r\n  }\r\n  {{ label | translate }}\r\n</ng-template>", styles: ["a{text-decoration:none}.mobile-header{display:flex;justify-content:space-between;padding:23px 27px;background-color:#fcfcfc;border:1px solid var(--base-70)}.mobile.menu-container.collapsed{display:none!important}.mobile.menu-container:not(.collapsed){display:block!important;position:absolute;min-width:100vw;min-height:100vh;z-index:1000}.mobile .profile-wrapper{position:relative}.mobile .profile-wrapper mat-icon{position:absolute!important;right:0}.menu-product-name{white-space:nowrap;margin-left:12px;font-weight:600;color:var(--primary-accent-darker)}.menu-container{max-height:100vh;white-space:nowrap;height:100%;transition:width .2s ease;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0;max-height:40px}.menu-container.collapsed .menu-container-header{margin:24px 0 32px!important}.menu-container .content:not(.collapsed){overflow-x:hidden;padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%}.menu-container .profile-wrapper{background:none;color:var(--base-30);display:flex;align-items:center;justify-content:start;margin:32px 16px}.menu-container .profile-icon{display:flex;justify-content:center;align-items:center;min-width:40px;height:40px;border-radius:100%;color:var(--base-0);background-color:var(--base-70);font-size:16px;font-weight:600}.menu-container .profile-name{max-width:145px;overflow:hidden;margin-left:12px}.profile-option-icon{vertical-align:middle;margin:0 5px 5px 0}:host ::ng-deep .collapsed .profile-wrapper{left:8px!important}:host ::ng-deep .menu-item{display:flex;padding:16px!important;border-radius:4px!important}:host ::ng-deep .child-list .menu-item{padding:8px 46px!important}:host ::ng-deep .collapsed .menu-item{padding:0!important;width:40px;height:40px;border-radius:50%!important}:host ::ng-deep .active-menu-item{background-color:var(--base-95)!important}:host ::ng-deep .menu-item-title{margin-left:12px}tld-menu-icon{margin-right:10px}.spin{animation:spinArrow .3s forwards}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}:host ::ng-deep .mobile .child-list .menu-item{padding:8px 54px!important}::ng-deep .cdk-overlay-container .profile-menu{margin:10px 0!important}::ng-deep .mat-mdc-menu-item .mat-icon{margin-right:5px!important}::ng-deep .collapsed .profile-wrapper{justify-content:center!important}::ng-deep .profile-menu a{font-weight:400!important;display:flex;align-items:center;gap:5px}::ng-deep .profile-menu a:hover{color:var(--mat-menu-item-label-text-color, var(--mat-app-on-surface))!important;text-decoration:inherit}@keyframes spinArrow{to{transform:rotate(180deg)}}\n"] }]
     }], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: undefined, decorators: [{
                 type: Optional
             }, {
@@ -963,196 +1016,10 @@ class SideNavMenuComponent extends NavBaseComponent {
             type: Input
         }], menuSettings: [{
             type: Input
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 16 }); })();
-
-const _c0$1 = [[["", "top", ""]], [["", "bottom", ""]]];
-const _c1$1 = ["[top]", "[bottom]"];
-function ModalNavMenuComponent_img_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "img", 7);
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("src", ctx_r0.menuDialogSettings.logo, i0.ɵɵsanitizeUrl);
-} }
-function ModalNavMenuComponent_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 8);
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "translate");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 1, "MENU.MENU"));
-} }
-function ModalNavMenuComponent_span_5_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 9);
-    i0.ɵɵlistener("click", function ModalNavMenuComponent_span_5_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.close()); });
-    i0.ɵɵelementStart(1, "mat-icon");
-    i0.ɵɵtext(2, "close");
-    i0.ɵɵelementEnd()();
-} }
-class ModalNavMenuComponent extends NavBaseComponent {
-    constructor(menuItems) {
-        super(menuItems);
-        this.menuItems = menuItems;
-        this.menuDialogSettings = {
-            showMenuTitle: false,
-            fullScreen: true
-        };
-        // any type because emitter doesn't really need a value
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        this.closeButtonClick = new EventEmitter();
-    }
-    close() {
-        this.closeButtonClick.emit(null);
-    }
-    static { this.ɵfac = function ModalNavMenuComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalNavMenuComponent)(i0.ɵɵdirectiveInject(MenuItemsService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModalNavMenuComponent, selectors: [["lib-modal-nav-menu"]], inputs: { menuDialogSettings: "menuDialogSettings" }, outputs: { closeButtonClick: "closeButtonClick" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1$1, decls: 9, vars: 7, consts: [["fxLayout", "row", "fxFlexFill", "", 1, "content", "menu-modal"], ["fxLayout", "column"], ["fxLayout", "row", 1, "menu-header"], ["width", "75", "alt", "", 3, "src", 4, "ngIf"], ["fxLayoutAlign", "start center", "fxFlex", "", 4, "ngIf"], ["class", "close-icon", "fxFlex", "", "fxLayoutAlign", "end center", 3, "click", 4, "ngIf"], [3, "direction", "active"], ["width", "75", "alt", "", 3, "src"], ["fxLayoutAlign", "start center", "fxFlex", ""], ["fxFlex", "", "fxLayoutAlign", "end center", 1, "close-icon", 3, "click"]], template: function ModalNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵprojectionDef(_c0$1);
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵtemplate(3, ModalNavMenuComponent_img_3_Template, 1, 1, "img", 3)(4, ModalNavMenuComponent_span_4_Template, 3, 3, "span", 4)(5, ModalNavMenuComponent_span_5_Template, 3, 0, "span", 5);
-            i0.ɵɵelementEnd();
-            i0.ɵɵprojection(6);
-            i0.ɵɵelement(7, "menu-columns", 6);
-            i0.ɵɵprojection(8, 1);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("full-screen", ctx.menuDialogSettings.fullScreen);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.menuDialogSettings.logo);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.menuDialogSettings.showMenuTitle);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.menuDialogSettings.showCloseMenuButton);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("direction", ctx.direction)("active", ctx.active);
-        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgIf, i2$1.MatIcon, MenuColumnsComponent, i8.TranslatePipe], styles: [".menu-modal[_ngcontent-%COMP%]{background-color:var(--base-100);padding:1.375rem 1.5rem}.close-icon[_ngcontent-%COMP%]{cursor:pointer}.menu-header[_ngcontent-%COMP%]{font-style:normal;font-weight:500;font-size:1.3125rem;line-height:1.75rem;text-align:center;margin:1em 0;color:var(--menu-dark-color)}.close-icon[_ngcontent-%COMP%] > mat-icon[_ngcontent-%COMP%]{transform:scale(1.5)}"] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalNavMenuComponent, [{
-        type: Component,
-        args: [{ selector: 'lib-modal-nav-menu', template: "<div class=\"content menu-modal\" fxLayout=\"row\" fxFlexFill>\r\n  <div fxLayout=\"column\" [class.full-screen]=\"menuDialogSettings.fullScreen\">\r\n    <div fxLayout=\"row\" class=\"menu-header\">\r\n      <img [src]=\"menuDialogSettings.logo\" *ngIf=\"menuDialogSettings.logo\" width=\"75\" alt=\"\">\r\n      <span *ngIf=\"menuDialogSettings.showMenuTitle\" fxLayoutAlign=\"start center\" fxFlex>{{\r\n        \"MENU.MENU\" | translate\r\n        }}</span>\r\n      <span *ngIf=\"menuDialogSettings.showCloseMenuButton\" (click)=\"close()\" class=\"close-icon\" fxFlex\r\n        fxLayoutAlign=\"end center\">\r\n        <mat-icon>close</mat-icon>\r\n      </span>\r\n    </div>\r\n    <ng-content select=\"[top]\"></ng-content>\r\n    <menu-columns [direction]=\"direction\" [active]=\"active\">\r\n    </menu-columns>\r\n    <ng-content select=\"[bottom]\"></ng-content>\r\n  </div>\r\n</div>", styles: [".menu-modal{background-color:var(--base-100);padding:1.375rem 1.5rem}.close-icon{cursor:pointer}.menu-header{font-style:normal;font-weight:500;font-size:1.3125rem;line-height:1.75rem;text-align:center;margin:1em 0;color:var(--menu-dark-color)}.close-icon>mat-icon{transform:scale(1.5)}\n"] }]
-    }], () => [{ type: MenuItemsService }], { menuDialogSettings: [{
-            type: Input
-        }], closeButtonClick: [{
-            type: Output
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalNavMenuComponent, { className: "ModalNavMenuComponent", filePath: "lib\\components\\modal-nav-menu\\modal-nav-menu.component.ts", lineNumber: 11 }); })();
-
-const menuLogo = `
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M3.3 6.6C2.36667 6.6 1.58333 6.28333 0.95 5.65C0.316666 5.01667 0 4.23333 0 3.3C0 2.36667 0.316666 1.58333 0.95 0.95C1.58333 0.316666 2.36667 0 3.3 0C4.23333 0 5.01667 0.316666 5.65 0.95C6.28333 1.58333 6.6 2.36667 6.6 3.3C6.6 4.23333 6.28333 5.01667 5.65 5.65C5.01667 6.28333 4.23333 6.6 3.3 6.6ZM16 32C15.0667 32 14.2833 31.6833 13.65 31.05C13.0167 30.4167 12.7 29.6333 12.7 28.7C12.7 27.7667 13.0167 26.9833 13.65 26.35C14.2833 25.7167 15.0667 25.4 16 25.4C16.9333 25.4 17.7167 25.7167 18.35 26.35C18.9833 26.9833 19.3 27.7667 19.3 28.7C19.3 29.6333 18.9833 30.4167 18.35 31.05C17.7167 31.6833 16.9333 32 16 32ZM3.3 32C2.36667 32 1.58333 31.6833 0.95 31.05C0.316666 30.4167 0 29.6333 0 28.7C0 27.7667 0.316666 26.9833 0.95 26.35C1.58333 25.7167 2.36667 25.4 3.3 25.4C4.23333 25.4 5.01667 25.7167 5.65 26.35C6.28333 26.9833 6.6 27.7667 6.6 28.7C6.6 29.6333 6.28333 30.4167 5.65 31.05C5.01667 31.6833 4.23333 32 3.3 32ZM3.3 19.3C2.36667 19.3 1.58333 18.9833 0.95 18.35C0.316666 17.7167 0 16.9333 0 16C0 15.0667 0.316666 14.2833 0.95 13.65C1.58333 13.0167 2.36667 12.7 3.3 12.7C4.23333 12.7 5.01667 13.0167 5.65 13.65C6.28333 14.2833 6.6 15.0667 6.6 16C6.6 16.9333 6.28333 17.7167 5.65 18.35C5.01667 18.9833 4.23333 19.3 3.3 19.3ZM16 19.3C15.0667 19.3 14.2833 18.9833 13.65 18.35C13.0167 17.7167 12.7 16.9333 12.7 16C12.7 15.0667 13.0167 14.2833 13.65 13.65C14.2833 13.0167 15.0667 12.7 16 12.7C16.9333 12.7 17.7167 13.0167 18.35 13.65C18.9833 14.2833 19.3 15.0667 19.3 16C19.3 16.9333 18.9833 17.7167 18.35 18.35C17.7167 18.9833 16.9333 19.3 16 19.3ZM28.7 6.6C27.7667 6.6 26.9833 6.28333 26.35 5.65C25.7167 5.01667 25.4 4.23333 25.4 3.3C25.4 2.36667 25.7167 1.58333 26.35 0.95C26.9833 0.316666 27.7667 0 28.7 0C29.6333 0 30.4167 0.316666 31.05 0.95C31.6833 1.58333 32 2.36667 32 3.3C32 4.23333 31.6833 5.01667 31.05 5.65C30.4167 6.28333 29.6333 6.6 28.7 6.6ZM16 6.6C15.0667 6.6 14.2833 6.28333 13.65 5.65C13.0167 5.01667 12.7 4.23333 12.7 3.3C12.7 2.36667 13.0167 1.58333 13.65 0.95C14.2833 0.316666 15.0667 0 16 0C16.9333 0 17.7167 0.316666 18.35 0.95C18.9833 1.58333 19.3 2.36667 19.3 3.3C19.3 4.23333 18.9833 5.01667 18.35 5.65C17.7167 6.28333 16.9333 6.6 16 6.6ZM28.7 19.3C27.7667 19.3 26.9833 18.9833 26.35 18.35C25.7167 17.7167 25.4 16.9333 25.4 16C25.4 15.0667 25.7167 14.2833 26.35 13.65C26.9833 13.0167 27.7667 12.7 28.7 12.7C29.6333 12.7 30.4167 13.0167 31.05 13.65C31.6833 14.2833 32 15.0667 32 16C32 16.9333 31.6833 17.7167 31.05 18.35C30.4167 18.9833 29.6333 19.3 28.7 19.3ZM28.7 32C27.7667 32 26.9833 31.6833 26.35 31.05C25.7167 30.4167 25.4 29.6333 25.4 28.7C25.4 27.7667 25.7167 26.9833 26.35 26.35C26.9833 25.7167 27.7667 25.4 28.7 25.4C29.6333 25.4 30.4167 25.7167 31.05 26.35C31.6833 26.9833 32 27.7667 32 28.7C32 29.6333 31.6833 30.4167 31.05 31.05C30.4167 31.6833 29.6333 32 28.7 32Z" fill="#434C56"/>
-</svg>
-
-`;
-
-var TitlePlacement;
-(function (TitlePlacement) {
-    TitlePlacement["none"] = "none";
-    TitlePlacement["left"] = "left";
-    TitlePlacement["right"] = "right";
-})(TitlePlacement || (TitlePlacement = {}));
-
-const _c0 = ["menuTrigger"];
-const _c1 = [[["", "top", ""]], [["", "bottom", ""]]];
-const _c2 = ["[top]", "[bottom]"];
-function MenuItemIconComponent_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 8);
-    i0.ɵɵtext(1);
-    i0.ɵɵpipe(2, "translate");
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("fxFlexOrder", ctx_r1.menuSettings.titlePlacement === ctx_r1.TITLE_PLACEMENT_LEFT ? 1 : 2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(2, 2, "MENU.MENU"));
-} }
-class MenuItemIconComponent {
-    constructor(iconService, router) {
-        this.iconService = iconService;
-        this.router = router;
-        this.menuSettings = {
-            titlePlacement: TitlePlacement.left
-        };
-        this.menuDialogSettings = {
-            showMenuTitle: true,
-            disableStrapi: true,
-            fullScreen: true
-        };
-        this.direction = MenuLayoutDirection.row;
-        this.subscription = [];
-        this.iconName = 'tld-menu-icon';
-        this.TITLE_PLACEMENT_NONE = TitlePlacement.none;
-        this.TITLE_PLACEMENT_LEFT = TitlePlacement.left;
-        this.PLAUSIBLE_EVENT = {
-            eventId: "burger_click"
-        };
-    }
-    ngOnInit() {
-        const routeChangeSub = this.router.events.subscribe(() => this.closeMenu());
-        this.subscription.push(routeChangeSub);
-        this.registerIcon();
-    }
-    closeMenu() {
-        this.menuTrigger?.closeMenu();
-    }
-    ngOnDestroy() {
-        this.subscription.forEach(e => e.unsubscribe());
-    }
-    registerIcon() {
-        if (this.menuSettings.iconPath) {
-            this.iconService.registerIconFromUrl(this.iconName, this.menuSettings.iconPath);
-        }
-        else {
-            this.iconService.registerIcons({ [this.iconName]: menuLogo });
-        }
-    }
-    static { this.ɵfac = function MenuItemIconComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemIconComponent)(i0.ɵɵdirectiveInject(i2.IconService), i0.ɵɵdirectiveInject(i1$1.Router)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemIconComponent, selectors: [["lib-menu-item-icon"]], viewQuery: function MenuItemIconComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.menuTrigger = _t.first);
-        } }, inputs: { menuSettings: "menuSettings", menuDialogSettings: "menuDialogSettings", direction: "direction" }, ngContentSelectors: _c2, decls: 10, vars: 12, consts: [["menuTrigger", "matMenuTrigger"], ["menu", ""], ["mat-button", "", 1, "content", "text-l", 3, "disableRipple", "matMenuTriggerFor", "libPlausibleEvent"], ["fxLayout", "row", "fxLayoutGap", "1.5em", "fxLayoutAlign", "center center"], ["class", "menu-label", 3, "fxFlexOrder", 4, "ngIf"], [3, "fxFlexOrder", "svgIcon"], [3, "hasBackdrop"], [3, "click", "closeButtonClick", "menuDialogSettings", "direction"], [1, "menu-label", 3, "fxFlexOrder"]], template: function MenuItemIconComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵprojectionDef(_c1);
-            i0.ɵɵelementStart(0, "button", 2, 0)(2, "span", 3);
-            i0.ɵɵtemplate(3, MenuItemIconComponent_span_3_Template, 3, 4, "span", 4);
-            i0.ɵɵelement(4, "mat-icon", 5);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(5, "mat-menu", 6, 1)(7, "lib-modal-nav-menu", 7);
-            i0.ɵɵlistener("click", function MenuItemIconComponent_Template_lib_modal_nav_menu_click_7_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("closeButtonClick", function MenuItemIconComponent_Template_lib_modal_nav_menu_closeButtonClick_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeMenu()); });
-            i0.ɵɵprojection(8, 0, ["top", ""]);
-            i0.ɵɵprojection(9, 1, ["bottom", ""]);
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            const menu_r3 = i0.ɵɵreference(6);
-            i0.ɵɵproperty("disableRipple", true)("matMenuTriggerFor", menu_r3)("libPlausibleEvent", ctx.PLAUSIBLE_EVENT);
-            i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.menuSettings.titlePlacement !== ctx.TITLE_PLACEMENT_NONE);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("fxFlexOrder", ctx.menuSettings.titlePlacement === ctx.TITLE_PLACEMENT_LEFT ? 2 : 1)("svgIcon", ctx.iconName);
-            i0.ɵɵadvance();
-            i0.ɵɵclassMapInterpolate1("mobile-menu-dialog ", ctx.menuDialogSettings.fullScreen ? "full-screen" : "minimized-screen", "");
-            i0.ɵɵproperty("hasBackdrop", true);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("menuDialogSettings", ctx.menuDialogSettings)("direction", ctx.direction);
-        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i2$2.DefaultFlexOrderDirective, i3.NgIf, i2$1.MatIcon, i8$1.MatButton, i9.MatMenu, i9.MatMenuTrigger, i2.PlausibleEventDirective, ModalNavMenuComponent, i8.TranslatePipe], styles: [".content[_ngcontent-%COMP%]{gap:1.5em;cursor:pointer}button.mat-mdc-icon-button[_ngcontent-%COMP%]{width:inherit}  lib-modal-nav-menu>.content.menu-modal>div.full-screen{width:100%}  lib-modal-nav-menu>.content.menu-modal>div.full-screen .menu-list-wrapper .menu-item{width:100%}  div:has(.mat-mdc-menu-panel.mobile-menu-dialog.full-screen){width:100%;max-width:100%}  .mat-mdc-menu-panel.mobile-menu-dialog.full-screen{width:100vw;margin-top:-2.5em;max-width:none}"] }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemIconComponent, [{
-        type: Component,
-        args: [{ selector: 'lib-menu-item-icon', template: "<button class=\"content text-l\" mat-button [disableRipple]=\"true\" #menuTrigger=\"matMenuTrigger\"\r\n  [matMenuTriggerFor]=\"menu\" [libPlausibleEvent]=\"PLAUSIBLE_EVENT\">\r\n  <span fxLayout=\"row\" fxLayoutGap=\"1.5em\" fxLayoutAlign=\"center center\">\r\n    <span *ngIf=\"menuSettings.titlePlacement !== TITLE_PLACEMENT_NONE\" [fxFlexOrder]=\"\r\n        menuSettings.titlePlacement === TITLE_PLACEMENT_LEFT ? 1 : 2\r\n      \" class=\"menu-label\">{{ \"MENU.MENU\" | translate }}</span>\r\n    <mat-icon [fxFlexOrder]=\"\r\n        menuSettings.titlePlacement === TITLE_PLACEMENT_LEFT ? 2 : 1\r\n      \" [svgIcon]=\"iconName\">\r\n    </mat-icon>\r\n  </span>\r\n</button>\r\n\r\n<mat-menu [hasBackdrop]=\"true\" #menu class=\"mobile-menu-dialog {{\r\n    menuDialogSettings.fullScreen ? 'full-screen' : 'minimized-screen'\r\n  }}\">\r\n  <!-- Click method so that menu does not get closed when clicking outside of items-->\r\n  <lib-modal-nav-menu (click)=\"$event.stopPropagation()\" (closeButtonClick)=\"closeMenu()\"\r\n    [menuDialogSettings]=\"menuDialogSettings\" [direction]=\"direction\">\r\n    <ng-content top select=\"[top]\"></ng-content>\r\n    <ng-content bottom select=\"[bottom]\"></ng-content>\r\n  </lib-modal-nav-menu>\r\n</mat-menu>", styles: [".content{gap:1.5em;cursor:pointer}button.mat-mdc-icon-button{width:inherit}::ng-deep lib-modal-nav-menu>.content.menu-modal>div.full-screen{width:100%}::ng-deep lib-modal-nav-menu>.content.menu-modal>div.full-screen .menu-list-wrapper .menu-item{width:100%}::ng-deep div:has(.mat-mdc-menu-panel.mobile-menu-dialog.full-screen){width:100%;max-width:100%}::ng-deep .mat-mdc-menu-panel.mobile-menu-dialog.full-screen{width:100vw;margin-top:-2.5em;max-width:none}\n"] }]
-    }], () => [{ type: i2.IconService }, { type: i1$1.Router }], { menuTrigger: [{
-            type: ViewChild,
-            args: ['menuTrigger']
-        }], menuSettings: [{
-            type: Input
-        }], menuDialogSettings: [{
-            type: Input
-        }], direction: [{
+        }], productName: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuItemIconComponent, { className: "MenuItemIconComponent", filePath: "lib\\components\\menu-item-icon\\menu-item-icon.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.component.ts", lineNumber: 16 }); })();
 
 class MenuModule {
     static forRoot(config) {
@@ -1181,8 +1048,6 @@ class MenuModule {
         args: [{
                 declarations: [
                     SideNavMenuComponent,
-                    ModalNavMenuComponent,
-                    MenuItemIconComponent,
                     NavBaseComponent,
                     MenuItemListComponent,
                     MenuColumnsComponent,
@@ -1191,8 +1056,6 @@ class MenuModule {
                 ],
                 exports: [
                     SideNavMenuComponent,
-                    ModalNavMenuComponent,
-                    MenuItemIconComponent,
                     MenuColumnsComponent,
                 ],
                 imports: [
@@ -1213,8 +1076,6 @@ class MenuModule {
             }]
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MenuModule, { declarations: [SideNavMenuComponent,
-        ModalNavMenuComponent,
-        MenuItemIconComponent,
         NavBaseComponent,
         MenuItemListComponent,
         MenuColumnsComponent,
@@ -1231,8 +1092,6 @@ class MenuModule {
         MatIconModule,
         TranslateModule,
         PlausibleModule], exports: [SideNavMenuComponent,
-        ModalNavMenuComponent,
-        MenuItemIconComponent,
         MenuColumnsComponent] }); })();
 
 /*
@@ -1243,5 +1102,5 @@ class MenuModule {
  * Generated bundle index. Do not edit.
  */
 
-export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MenuColumnsComponent, MenuItemIconComponent, MenuItemsService, MenuLayoutDirection, MenuModule, ModalNavMenuComponent, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation, TitlePlacement };
+export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MenuColumnsComponent, MenuItemsService, MenuLayoutDirection, MenuModule, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation };
 //# sourceMappingURL=tilde-nlp-ngx-menu.mjs.map