@tilde-nlp/ngx-menu 6.1.11 → 6.1.13

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

@@ -28,6 +28,8 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatListModule } from '@angular/material/list';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
+const MENU_SHARED_CONFIG = "menu-shared-config";
+
 /** Necessary for menu components to determine where loaded data from strapi should be placed - either in front of pre defined items or in end. */
 var StrapiDataLocation;
 (function (StrapiDataLocation) {
@@ -35,8 +37,6 @@ var StrapiDataLocation;
     StrapiDataLocation[StrapiDataLocation["END"] = 1] = "END";
 })(StrapiDataLocation || (StrapiDataLocation = {}));
 
-const MENU_SHARED_CONFIG = "menu-shared-config";
-
 const MENU_ICON_STRAPI_EXTENSION = ".svg";
 
 class StarpiMenuService {
@@ -135,9 +135,9 @@ class MenuItemsService {
     get strapiDataLocation() { return this.menuSharedConfig?.strapiDataLocation ?? StrapiDataLocation.END; }
     get mergedGroups() { return this._mergedGroups; }
     get menuItemGroups() { return this.menuSharedConfig.itemGroups; }
-    constructor(router, config, strapiService) {
+    constructor(router, menuSharedConfig, strapiService) {
         this.router = router;
-        this.config = config;
+        this.menuSharedConfig = menuSharedConfig;
         this.strapiService = strapiService;
         this._activeElements = new BehaviorSubject({});
         this.strapiItems = [];
@@ -148,14 +148,9 @@ class MenuItemsService {
             fragment: 'exact'
         };
         this._mergedGroups = [];
-        this.menuSharedConfig = config;
-        this.initData();
+        this.getStrapiData();
         this.subscribeToRouteChanges();
     }
-    setMenuItems(config) {
-        this.menuSharedConfig = config;
-        this.initData();
-    }
     subscribeToRouteChanges() {
         this.router.events
             .pipe(filter(e => e instanceof NavigationEnd))
@@ -194,7 +189,7 @@ class MenuItemsService {
         }
         return customIdElement;
     }
-    initData() {
+    getStrapiData() {
         if (!this.menuSharedConfig?.disableStrapi) {
             this.strapiService.getMenuItems().subscribe(this.loadData.bind(this));
         }
@@ -290,18 +285,17 @@ function MenuIconComponent_ng_container_0_mat_icon_1_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("svgIcon", ctx_r0.menuItem.icon);
 } }
 function MenuIconComponent_ng_container_0_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 4);
+    i0.ɵɵelementStart(0, "mat-icon", 4);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("material-icons-outlined", ctx_r0.menuItem == null ? null : ctx_r0.menuItem.isIconOutlined);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r0.menuItem.icon);
 } }
 function MenuIconComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, MenuIconComponent_ng_container_0_mat_icon_1_Template, 1, 1, "mat-icon", 2)(2, MenuIconComponent_ng_container_0_ng_template_2_Template, 2, 3, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(1, MenuIconComponent_ng_container_0_mat_icon_1_Template, 1, 1, "mat-icon", 2)(2, MenuIconComponent_ng_container_0_ng_template_2_Template, 2, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const materialIcon_r2 = i0.ɵɵreference(3);
@@ -318,7 +312,7 @@ class MenuIconComponent {
         return typeof icon !== "string";
     }
     static { this.ɵfac = function MenuIconComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuIconComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuIconComponent, selectors: [["tld-menu-icon"]], inputs: { menuItem: "menuItem" }, decls: 1, vars: 1, consts: [["materialIcon", ""], [4, "ngIf"], ["class", "menu-icon", 3, "svgIcon", 4, "ngIf", "ngIfElse"], [1, "menu-icon", 3, "svgIcon"], [1, "material-icons", "menu-icon"]], template: function MenuIconComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuIconComponent, selectors: [["tld-menu-icon"]], inputs: { menuItem: "menuItem" }, decls: 1, vars: 1, consts: [["materialIcon", ""], [4, "ngIf"], ["class", "menu-icon", 3, "svgIcon", 4, "ngIf", "ngIfElse"], [1, "menu-icon", 3, "svgIcon"], [1, "menu-icon"]], template: function MenuIconComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, MenuIconComponent_ng_container_0_Template, 4, 2, "ng-container", 1);
         } if (rf & 2) {
             i0.ɵɵproperty("ngIf", ctx.menuItem.icon);
@@ -326,7 +320,7 @@ class MenuIconComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuIconComponent, [{
         type: Component,
-        args: [{ selector: 'tld-menu-icon', template: "<ng-container *ngIf=\"menuItem.icon\">\r\n  <mat-icon class=\"menu-icon\" [svgIcon]=\"menuItem.icon\" *ngIf=\"!menuItem.materialIcon; else materialIcon;\"></mat-icon>\r\n  <ng-template #materialIcon>\r\n    <span class=\"material-icons menu-icon\" [class.material-icons-outlined]=\"menuItem?.isIconOutlined\">{{menuItem.icon}}</span>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".menu-icon{color:var(--base-30);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px;vertical-align:middle}\n"] }]
+        args: [{ selector: 'tld-menu-icon', template: "<ng-container *ngIf=\"menuItem.icon\">\r\n  <mat-icon class=\"menu-icon\" [svgIcon]=\"menuItem.icon\" *ngIf=\"!menuItem.materialIcon; else materialIcon;\"></mat-icon>\r\n  <ng-template #materialIcon>\r\n    <mat-icon class=\"menu-icon\">{{menuItem.icon}}</mat-icon>\r\n  </ng-template>\r\n</ng-container>\r\n", styles: [".menu-icon{color:var(--base-30);margin:auto;min-width:24px;min-height:24px;max-width:24px;max-height:24px;vertical-align:middle}\n"] }]
     }], null, { menuItem: [{
             type: Input
         }] }); })();
@@ -545,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", "center center", "class", "menu-item-list-title", 4, "ngIf"], ["fxLayout", "column", 1, "menu-item-list", 3, "fxLayoutAlign"], [4, "ngFor", "ngForOf"], ["fxLayoutAlign", "center 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) {
+    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);
@@ -559,11 +553,11 @@ class MenuItemListComponent {
             i0.ɵɵproperty("fxLayoutAlign", ctx.menuLayoutDirection);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.items);
-        } }, 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}.menu-item-list-title[_ngcontent-%COMP%]{padding:8px 0 24px;font-size:16px;font-weight:600}.menu-item-list[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_slide-in .3s forwards}@keyframes _ngcontent-%COMP%_slide-in{0%{margin-left:-100px}to{margin-left:0}}"] }); }
+        } }, 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=\"center 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}.menu-item-list-title{padding:8px 0 24px;font-size:16px;font-weight:600}.menu-item-list{animation:slide-in .3s forwards}@keyframes slide-in{0%{margin-left:-100px}to{margin-left:0}}\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: [{
@@ -679,13 +673,42 @@ class MenuColumnsComponent {
 
 const _forTrack0 = ($index, $item) => $item.label;
 const _c0 = (a0, a1) => ({ icon: a0, label: a1 });
-function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
+function SideNavMenuComponent_div_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 6);
+    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_14_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", 7);
-    i0.ɵɵelementStart(3, "span", 8);
+    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) {
@@ -697,144 +720,158 @@ function SideNavMenuComponent_a_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.productName, " ");
 } }
-function SideNavMenuComponent_button_23_ng_container_4_mat_icon_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 24);
+function SideNavMenuComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "mat-icon");
+    i0.ɵɵtext(1, "close");
+    i0.ɵɵelementEnd();
+} }
+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_23_ng_container_4_ng_template_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon", 24);
+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_23_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", 22);
+    i0.ɵɵelementStart(1, "span", 21);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, SideNavMenuComponent_button_23_ng_container_4_mat_icon_3_Template, 2, 1, "mat-icon", 23)(4, SideNavMenuComponent_button_23_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_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 19, 2)(2, "div", 20);
+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_23_ng_container_4_Template, 6, 3, "ng-container", 21);
+    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(25);
-    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_27_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_27_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 26);
-    i0.ɵɵtemplate(1, SideNavMenuComponent_For_27_Conditional_0_Conditional_0_ng_container_1_Template, 1, 0, "ng-container", 28);
+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(29);
-    i0.ɵɵproperty("href", item_r7.link.href, i0.ɵɵsanitizeUrl);
+    const profileMenuItem_r9 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("href", item_r8.link.href, i0.ɵɵsanitizeUrl);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r7.icon, item_r7.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r8.icon, item_r8.label));
 } }
-function SideNavMenuComponent_For_27_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_27_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 27);
-    i0.ɵɵtemplate(1, SideNavMenuComponent_For_27_Conditional_0_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 28);
+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(29);
-    i0.ɵɵproperty("routerLink", item_r7.link.href);
+    const profileMenuItem_r9 = i0.ɵɵreference(17);
+    i0.ɵɵproperty("routerLink", item_r8.link.href);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r7.icon, item_r7.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction2(3, _c0, item_r8.icon, item_r8.label));
 } }
-function SideNavMenuComponent_For_27_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_For_27_Conditional_0_Conditional_0_Template, 2, 6, "a", 26)(1, SideNavMenuComponent_For_27_Conditional_0_Conditional_1_Template, 2, 6, "a", 27);
+function SideNavMenuComponent_For_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SideNavMenuComponent_For_15_Conditional_0_Conditional_0_Template, 2, 6, "a", 25)(1, SideNavMenuComponent_For_15_Conditional_0_Conditional_1_Template, 2, 6, "a", 26);
 } if (rf & 2) {
-    const item_r7 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵconditional(item_r7.link.isExternal ? 0 : 1);
+    const item_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵconditional(item_r8.link.isExternal ? 0 : 1);
 } }
-function SideNavMenuComponent_For_27_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_27_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 29);
-    i0.ɵɵlistener("click", function SideNavMenuComponent_For_27_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const item_r7 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(item_r7.button == null ? null : item_r7.button.callback()); });
-    i0.ɵɵtemplate(1, SideNavMenuComponent_For_27_Conditional_1_ng_container_1_Template, 1, 0, "ng-container", 28);
+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.button == null ? null : item_r8.button.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(29);
+    const profileMenuItem_r9 = i0.ɵɵreference(17);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r7.icon, item_r7.label));
+    i0.ɵɵproperty("ngTemplateOutlet", profileMenuItem_r9)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c0, item_r8.icon, item_r8.label));
 } }
-function SideNavMenuComponent_For_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_For_27_Conditional_0_Template, 2, 1)(1, SideNavMenuComponent_For_27_Conditional_1_Template, 2, 5, "button", 25);
+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, 5, "button", 24);
 } if (rf & 2) {
-    const item_r7 = ctx.$implicit;
-    i0.ɵɵconditional(item_r7.link ? 0 : 1);
+    const item_r8 = ctx.$implicit;
+    i0.ɵɵconditional(item_r8.link ? 0 : 1);
 } }
-function SideNavMenuComponent_ng_template_28_Conditional_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 32);
+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 icon_r10 = i0.ɵɵnextContext(2).icon;
-    i0.ɵɵclassProp("material-icons-outlined", icon_r10 == null ? null : icon_r10.isOutlined);
+    const icon_r11 = i0.ɵɵnextContext(2).icon;
+    i0.ɵɵclassProp("material-icons-outlined", icon_r11 == null ? null : icon_r11.isOutlined);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", icon_r10 == null ? null : icon_r10.name, " ");
+    i0.ɵɵtextInterpolate1(" ", icon_r11 == null ? null : icon_r11.name, " ");
 } }
-function SideNavMenuComponent_ng_template_28_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mat-icon", 31);
+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_r10 = i0.ɵɵnextContext(2).icon;
-    i0.ɵɵproperty("svgIcon", icon_r10 == null ? null : icon_r10.name);
+    const icon_r11 = i0.ɵɵnextContext(2).icon;
+    i0.ɵɵproperty("svgIcon", icon_r11 == null ? null : icon_r11.name);
 } }
-function SideNavMenuComponent_ng_template_28_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_28_Conditional_0_Conditional_0_Template, 2, 3, "span", 30)(1, SideNavMenuComponent_ng_template_28_Conditional_0_Conditional_1_Template, 1, 1, "mat-icon", 31);
+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 icon_r10 = i0.ɵɵnextContext().icon;
-    i0.ɵɵconditional(!(icon_r10 == null ? null : icon_r10.isCustom) ? 0 : 1);
+    const icon_r11 = i0.ɵɵnextContext().icon;
+    i0.ɵɵconditional(!(icon_r11 == null ? null : icon_r11.isCustom) ? 0 : 1);
 } }
-function SideNavMenuComponent_ng_template_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SideNavMenuComponent_ng_template_28_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_r10 = ctx.icon;
-    const label_r11 = ctx.label;
-    i0.ɵɵconditional(icon_r10 ? 0 : -1);
+    const icon_r11 = ctx.icon;
+    const label_r12 = ctx.label;
+    i0.ɵɵconditional(icon_r11 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r11), "\n");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 2, label_r12), "\n");
 } }
 class SideNavMenuComponent extends NavBaseComponent {
     #username;
@@ -851,7 +888,7 @@ class SideNavMenuComponent extends NavBaseComponent {
     get sideNavWidth() {
         return this.collapsed ? this.menuSettings.collapsedWidth : this.menuSettings.expandedWidth;
     }
-    constructor(strapiLinkService, domService, menuItems) {
+    constructor(strapiLinkService, domService, menuItems, menuSharedConfig) {
         super(menuItems);
         this.strapiLinkService = strapiLinkService;
         this.domService = domService;
@@ -864,6 +901,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";
@@ -881,7 +919,7 @@ class SideNavMenuComponent extends NavBaseComponent {
             eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
             properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "collapse" }]
         };
-        this.baseUrl = menuItems.menuSharedConfig.baseUrl || '';
+        this.baseUrl = menuSharedConfig.baseUrl || '';
     }
     ngOnInit() {
         super.ngOnInit();
@@ -899,7 +937,7 @@ class SideNavMenuComponent extends NavBaseComponent {
         if (!this.domService.localStorage) {
             return;
         }
-        this.collapsed = (this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' || ResolutionHelper.isMobileRes()) ? true : false;
+        this.collapsed = (this.domService.localStorage.getItem(this.COLLAPSED_LOCAL_STORAGE_KEY) == 'true' || this.isMobile) ? true : false;
     }
     setColapsedFromLocalStorage() {
         if (!this.domService.localStorage) {
@@ -921,56 +959,29 @@ class SideNavMenuComponent extends NavBaseComponent {
         // If there are more than one word, use the first letter of the first two names
         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)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SideNavMenuComponent, selectors: [["lib-side-nav-menu"]], inputs: { username: "username", menuSettings: "menuSettings", productName: "productName" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 30, vars: 28, consts: [["menu", "matMenu"], ["profileMenuItem", ""], ["state", "matMenuTrigger"], ["iconDown", ""], ["fxHide.gt-xs", ""], [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"], ["mat-icon-button", "", 1, "toggler", 3, "click", "libPlausibleEvent"], ["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"], ["fxHide.lt-sm", ""], ["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, "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.ɵ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", 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, "a", 6);
-            i0.ɵɵpipe(3, "translate");
-            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_a_click_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.logoClick($event)); });
-            i0.ɵɵelement(4, "img", 7);
-            i0.ɵɵelementStart(5, "span", 8);
-            i0.ɵɵtext(6);
+            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(7, "button", 9);
-            i0.ɵɵpipe(8, "translate");
-            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
-            i0.ɵɵelementStart(9, "mat-icon");
-            i0.ɵɵtext(10, "menu");
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(11, "div", 10)(12, "div", 11)(13, "div", 12);
-            i0.ɵɵtemplate(14, SideNavMenuComponent_a_14_Template, 5, 7, "a", 13);
-            i0.ɵɵelementStart(15, "button", 9);
-            i0.ɵɵpipe(16, "translate");
-            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
-            i0.ɵɵelementStart(17, "mat-icon", 4);
-            i0.ɵɵtext(18, "close");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "mat-icon", 14);
-            i0.ɵɵtext(20);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(21, "div", 15)(22, "menu-columns", 16);
-            i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_22_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
+            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(23, SideNavMenuComponent_button_23_Template, 5, 3, "button", 17);
-            i0.ɵɵelementStart(24, "mat-menu", 18, 0);
-            i0.ɵɵrepeaterCreate(26, SideNavMenuComponent_For_27_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(28, SideNavMenuComponent_ng_template_28_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.ɵɵproperty("fxHide", !ctx.collapsed);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("libPlausibleEvent", ctx.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx.baseUrl, i0.ɵɵsanitizeUrl);
-            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(3, 22, "MENU.ARIA_LABELS.LOGO"));
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("src", ctx.menuLogoImage, i0.ɵɵsanitizeUrl);
-            i0.ɵɵadvance(2);
-            i0.ɵɵtextInterpolate1(" ", ctx.productName, " ");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("libPlausibleEvent", ctx.collapsed ? ctx.EXPAND_PLAUSIBLE_EVENT : ctx.COLLAPSE_PLAUSIBLE_EVENT);
-            i0.ɵɵattribute("aria-label", i0.ɵɵpipeBind1(8, 24, "ARIA_LABELS.MENU_TOGGLER"));
-            i0.ɵɵadvance(4);
             i0.ɵɵstyleProp("width", ctx.sideNavWidth);
             i0.ɵɵclassProp("collapsed", ctx.collapsed);
             i0.ɵɵproperty("ngClass.lt-sm", "mobile");
@@ -980,10 +991,10 @@ class SideNavMenuComponent extends NavBaseComponent {
             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(16, 26, "ARIA_LABELS.MENU_TOGGLER"));
-            i0.ɵɵadvance(5);
-            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.ɵɵ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);
@@ -993,15 +1004,20 @@ class SideNavMenuComponent extends NavBaseComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SideNavMenuComponent, [{
         type: Component,
-        args: [{ selector: 'lib-side-nav-menu', template: "<div fxHide.gt-xs>\r\n  <div [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</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        <mat-icon fxHide.gt-xs>close</mat-icon>\r\n        <mat-icon fxHide.lt-sm>{{ 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 [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.link) {\r\n          @if (item.link.isExternal) {\r\n            <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          } @else {\r\n            <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, 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.button?.callback()\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, 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-label=\"label\">\r\n  @if (icon) {\r\n    @if (!icon?.isCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n        {{icon?.name}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></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 }], { username: [{
+        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.link) {\r\n          @if (item.link.isExternal) {\r\n            <a class=\"mat-mdc-menu-item\" [href]=\"item.link.href\" target=\"_blank\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, label: item.label }\">\r\n              </ng-container>\r\n            </a>\r\n          } @else {\r\n            <a class=\"mat-mdc-menu-item\" [routerLink]=\"item.link.href\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, 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.button?.callback()\"\r\n        >\r\n          <ng-container\r\n            *ngTemplateOutlet=\"profileMenuItem; context: { icon: item.icon, 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-label=\"label\">\r\n  @if (icon) {\r\n    @if (!icon?.isCustom) {\r\n      <span class=\"material-icons profile-option-icon\" [class.material-icons-outlined]=\"icon?.isOutlined\">\r\n        {{icon?.name}}\r\n      </span>\r\n    } @else {\r\n      <mat-icon class=\"profile-option-icon\" [svgIcon]=\"icon?.name\"></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
+            }, {
+                type: Inject,
+                args: [MENU_SHARED_CONFIG]
+            }] }], { username: [{
             type: Input
         }], menuSettings: [{
             type: Input
         }], productName: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SideNavMenuComponent, { className: "SideNavMenuComponent", filePath: "lib\\components\\side-nav-menu\\side-nav-menu.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) {
@@ -1076,6 +1092,42 @@ class MenuModule {
         PlausibleModule], exports: [SideNavMenuComponent,
         MenuColumnsComponent] }); })();
 
+/**
+ * Prefefined user menu options, so that same style of items are used across all products. Use this by passing necessary configuration.
+ */
+const USER_MENU_OPTIONS = {
+    subscription: (href) => ({
+        icon: { name: "credit_card" },
+        label: 'MENU.SUBSCRIPTION',
+        link: { href: href }
+    }),
+    termsOfUse: (href) => ({
+        icon: { name: "text_snippet" },
+        label: 'MENU.TERMS_OF_USE',
+        link: { href, isExternal: true }
+    }),
+    privacy: (href) => ({
+        icon: { name: "gpp_maybe" },
+        label: 'MENU.PRIVACY',
+        link: { href, isExternal: true },
+    }),
+    help: (href) => ({
+        label: 'MENU.HELP_CENTER',
+        icon: { name: `help` },
+        link: { href, isExternal: true }
+    }),
+    contactUs: (href) => ({
+        label: 'MENU.CONTACT_US',
+        icon: { name: `mail` },
+        link: { href, isExternal: true }
+    }),
+    logout: (callback) => ({
+        icon: { name: "logout" },
+        label: 'MENU.LOG_OUT',
+        button: { callback: () => callback() }
+    })
+};
+
 /*
  * Public API Surface of ngx-menu
  */
@@ -1084,5 +1136,5 @@ class MenuModule {
  * Generated bundle index. Do not edit.
  */
 
-export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MenuColumnsComponent, MenuItemsService, MenuLayoutDirection, MenuModule, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation };
+export { MENU_ICON_STRAPI_EXTENSION, MENU_SHARED_CONFIG, MenuColumnsComponent, MenuItemsService, MenuLayoutDirection, MenuModule, NavBaseComponent, SideNavMenuComponent, StarpiMenuService, StrapiDataLocation, USER_MENU_OPTIONS };
 //# sourceMappingURL=tilde-nlp-ngx-menu.mjs.map