@tilde-nlp/ngx-menu 5.0.3 → 6.0.2

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

@@ -15,18 +15,18 @@ import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i7 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i8$1 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 { MatTooltipModule } from '@angular/material/tooltip';
-import * as i9 from '@ngx-translate/core';
+import * as i8 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { FlexLayoutModule } from '@ngbracket/ngx-layout';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatListModule } from '@angular/material/list';
-import * as i7$1 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 const MENU_SHARED_CONFIG = "menu-shared-config";
 
@@ -105,7 +105,7 @@ class StarpiMenuService {
             customId: item.customId
         };
     }
-    static { this.ɵfac = function StarpiMenuService_Factory(t) { return new (t || StarpiMenuService)(i0.ɵɵinject(i1.StrapiSubscriptionService), i0.ɵɵinject(MENU_SHARED_CONFIG, 8), i0.ɵɵinject(STRAPI_API_CONFIG_TOKEN), i0.ɵɵinject(i2.IconService)); }; }
+    static { this.ɵfac = function StarpiMenuService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StarpiMenuService)(i0.ɵɵinject(i1.StrapiSubscriptionService), i0.ɵɵinject(MENU_SHARED_CONFIG, 8), i0.ɵɵinject(STRAPI_API_CONFIG_TOKEN), i0.ɵɵinject(i2.IconService)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: StarpiMenuService, factory: StarpiMenuService.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StarpiMenuService, [{
@@ -214,10 +214,6 @@ class MenuItemsService {
         this._allRootItems = newArray;
         this.updateActive();
     }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    // private isMenuItem(item: any): item is MenuItems {
-    //   return item.customId;
-    // }
     isElementCustomIdActive(element) {
         return this.customId && element.customId === this.customId;
     }
@@ -225,7 +221,7 @@ class MenuItemsService {
         const routerLinkActiveOptions = element.routerLinkActiveOptions ?? this.menuSharedConfig.activeMatchOptions ?? this.isActiveMatchOptions;
         return this.router.isActive(element.link, routerLinkActiveOptions);
     }
-    static { this.ɵfac = function MenuItemsService_Factory(t) { return new (t || MenuItemsService)(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(MENU_SHARED_CONFIG, 8), i0.ɵɵinject(StarpiMenuService)); }; }
+    static { this.ɵfac = function MenuItemsService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemsService)(i0.ɵɵinject(i1$1.Router), i0.ɵɵinject(MENU_SHARED_CONFIG, 8), i0.ɵɵinject(StarpiMenuService)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: MenuItemsService, factory: MenuItemsService.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemsService, [{
@@ -259,7 +255,7 @@ class NavBaseComponent {
     destroyBase() {
         this.activeItemSubscription?.unsubscribe();
     }
-    static { this.ɵfac = function NavBaseComponent_Factory(t) { return new (t || NavBaseComponent)(i0.ɵɵdirectiveInject(MenuItemsService)); }; }
+    static { this.ɵfac = function NavBaseComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NavBaseComponent)(i0.ɵɵdirectiveInject(MenuItemsService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NavBaseComponent, selectors: [["nav-base"]], inputs: { direction: "direction" }, decls: 2, vars: 0, template: function NavBaseComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "p");
             i0.ɵɵtext(1, "nav-base works!");
@@ -313,7 +309,7 @@ class MenuIconComponent {
     isIconMediaType(icon) {
         return typeof icon !== "string";
     }
-    static { this.ɵfac = function MenuIconComponent_Factory(t) { return new (t || MenuIconComponent)(); }; }
+    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, "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) {
@@ -374,8 +370,8 @@ class MenuItemLinkComponent {
     ngOnDestroy() {
         this.placeholderService.unregister(this.placeholderServiceId);
     }
-    static { this.ɵfac = function MenuItemLinkComponent_Factory(t) { return new (t || MenuItemLinkComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i1.StrapiVariablesService)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemLinkComponent, selectors: [["tld-menu-item-link"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", menuItem: "menuItem" }, decls: 5, vars: 17, consts: [["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", "fxLayoutGap", "0.375rem", 1, "text-m", "menu-item", 3, "click", "libPlausibleEvent", "fxLayout", "ngClass.lt-md", "matTooltip", "fxLayoutAlign", "href"], [4, "ngIf"], ["class", "menu-item-title", 4, "ngIf"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"]], template: function MenuItemLinkComponent_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵfac = function MenuItemLinkComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuItemLinkComponent)(i0.ɵɵdirectiveInject(i1.StrapiLinkService), i0.ɵɵdirectiveInject(i1.StrapiVariablesService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MenuItemLinkComponent, selectors: [["tld-menu-item-link"]], inputs: { direction: "direction", labelsVisible: "labelsVisible", activeItem: "activeItem", showIcons: "showIcons", menuItem: "menuItem" }, decls: 5, vars: 17, consts: [["matTooltipPosition", "after", "matTooltipClass", "menu-tooltip", 1, "text-m", "menu-item", 3, "click", "libPlausibleEvent", "fxLayout", "ngClass.lt-md", "matTooltip", "fxLayoutAlign", "href"], [4, "ngIf"], ["class", "menu-item-title", 4, "ngIf"], [3, "menuItem"], [1, "menu-item-title"], [1, "title-content"]], template: function MenuItemLinkComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "a", 0);
             i0.ɵɵpipe(1, "translate");
             i0.ɵɵpipe(2, "translate");
@@ -390,11 +386,11 @@ class MenuItemLinkComponent {
             i0.ɵɵproperty("ngIf", ctx.showIcons && ctx.menuItem.icon);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.labelsVisible);
-        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i3$1.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i9.TranslatePipe] }); }
+        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i3$1.DefaultClassDirective, i3.NgIf, i5.MatTooltip, i2.PlausibleEventDirective, MenuIconComponent, i8.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MenuItemLinkComponent, [{
         type: Component,
-        args: [{ selector: 'tld-menu-item-link', template: "<a [libPlausibleEvent]=\"menuItem.plausibleEvent\" [fxLayout]=\"menuItemLayout\"\r\n  [ngClass.lt-md]=\"'mobile'\" [class.text-center]=\"menuItemLayout === 'column'\" class=\"text-m menu-item\"\r\n  [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\"\r\n  [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" (click)=\"linkClick($event, menuItem)\"\r\n  [href]=\"href | translate\" [attr.target]=\"menuItem.externalLink?'_blank': '_self'\" fxLayoutGap=\"0.375rem\"\r\n  [class.active-menu-item]=\"menuItem === activeItem\">\r\n  <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n    <tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n  </ng-container>\r\n  <span *ngIf=\"labelsVisible\" class=\"menu-item-title\">\r\n    <span class=\"title-content\" [attr.content]=\"menuItem.title | translate\">\r\n      {{ menuItem.title | translate}}\r\n    </span>\r\n  </span>\r\n</a>\r\n" }]
+        args: [{ selector: 'tld-menu-item-link', template: "<a [libPlausibleEvent]=\"menuItem.plausibleEvent\" [fxLayout]=\"menuItemLayout\"\r\n  [ngClass.lt-md]=\"'mobile'\" [class.text-center]=\"menuItemLayout === 'column'\" class=\"text-m menu-item\"\r\n  [matTooltip]=\"!labelsVisible ? (menuItem.title | translate) : ''\" matTooltipPosition=\"after\"\r\n  [fxLayoutAlign]=\"menuLayoutDirection\" matTooltipClass=\"menu-tooltip\" (click)=\"linkClick($event, menuItem)\"\r\n  [href]=\"href | translate\" [attr.target]=\"menuItem.externalLink?'_blank': '_self'\"\r\n  [class.active-menu-item]=\"menuItem === activeItem\">\r\n  <ng-container *ngIf=\"showIcons && menuItem.icon\">\r\n    <tld-menu-icon [menuItem]=\"menuItem\"></tld-menu-icon>\r\n  </ng-container>\r\n  <span *ngIf=\"labelsVisible\" class=\"menu-item-title\">\r\n    <span class=\"title-content\" [attr.content]=\"menuItem.title | translate\">\r\n      {{ menuItem.title | translate}}\r\n    </span>\r\n  </span>\r\n</a>\r\n", styles: [":host{width:100%}\n"] }]
     }], () => [{ type: i1.StrapiLinkService }, { type: i1.StrapiVariablesService }], { direction: [{
             type: Input
         }], labelsVisible: [{
@@ -494,8 +490,8 @@ function MenuItemListComponent_ng_template_4_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const menuItem_r6 = ctx.menuItem;
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("text-center", ctx_r0.menuItemLayout === "column")("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) && menuItem_r6 === ctx_r0.activeItem);
-    i0.ɵɵproperty("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1, 12, menuItem_r6.title) : "")("fxLayoutAlign", ctx_r0.menuLayoutDirection);
+    i0.ɵɵclassProp("menu-labels-visible", ctx_r0.labelsVisible)("active-menu-item", (ctx_r0.activeItem == null ? null : ctx_r0.activeItem.link) && menuItem_r6 === ctx_r0.activeItem);
+    i0.ɵɵproperty("fxLayout", ctx_r0.menuItemLayout)("matTooltip", !ctx_r0.labelsVisible ? i0.ɵɵpipeBind1(1, 10, menuItem_r6.title) : "")("fxLayoutAlign", ctx_r0.menuLayoutDirection);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngIf", ctx_r0.showIcons && menuItem_r6.icon);
     i0.ɵɵadvance();
@@ -539,14 +535,14 @@ class MenuItemListComponent {
         }
         this.toggleExpand.next(menuItem);
     }
-    static { this.ɵfac = function MenuItemListComponent_Factory(t) { return new (t || MenuItemListComponent)(); }; }
+    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", "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);
             i0.ɵɵtemplate(3, MenuItemListComponent_ng_container_3_Template, 2, 4, "ng-container", 5);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_4_Template, 5, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(6, MenuItemListComponent_ng_template_6_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵtemplate(4, MenuItemListComponent_ng_template_4_Template, 5, 12, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(6, MenuItemListComponent_ng_template_6_Template, 1, 6, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.titleKey && ctx.showTitle && ctx.labelsVisible);
@@ -554,11 +550,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, i9.TranslatePipe], styles: ["[_nghost-%COMP%]{margin:1em 0;display:inline-block}[_nghost-%COMP%]  .menu-list-wrapper .menu-item-list-title{margin-bottom:1em;font-size:1rem;font-weight:500;line-height:1.5rem}[_nghost-%COMP%]  .menu-list-wrapper .text-center{text-align:center}[_nghost-%COMP%]  .menu-list-wrapper tld-menu-item-link+tld-menu-item-link, [_nghost-%COMP%]  .menu-list-wrapper tld-menu-item-link+.menu-item, [_nghost-%COMP%]  .menu-list-wrapper .menu-item+tld-menu-item-link, [_nghost-%COMP%]  .menu-list-wrapper .menu-item+.menu-item{margin-top:1.5625em}[_nghost-%COMP%]  .menu-list-wrapper .child-list tld-menu-item-link{margin-top:1em}[_nghost-%COMP%]  .menu-list-wrapper .menu-labels-visible{width:100%}[_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:focus-visible{outline:black solid 2px}[_nghost-%COMP%]  .menu-list-wrapper .menu-item:not(button):hover{font-weight:600}[_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{color:var(--primary-accent)!important;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[_ngcontent-%COMP%]{padding-left:30px;margin:0}.mob-menu-item[_ngcontent-%COMP%]{width:100%}"] }); }
+        } }, 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 .child-list tld-menu-item-link{margin-top:1em}[_nghost-%COMP%]     .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-40);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}[_nghost-%COMP%]     .menu-list-wrapper .menu-item:not(button):hover{font-weight:600}[_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%]{width:100%}"] }); }
 }
 (() => { (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 [fxLayout]=\"menuItemLayout\" [class.text-center]=\"menuItemLayout === 'column'\" 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{margin:1em 0;display:inline-block}:host::ng-deep .menu-list-wrapper .menu-item-list-title{margin-bottom:1em;font-size:1rem;font-weight:500;line-height:1.5rem}:host::ng-deep .menu-list-wrapper .text-center{text-align:center}:host::ng-deep .menu-list-wrapper tld-menu-item-link+tld-menu-item-link,:host::ng-deep .menu-list-wrapper tld-menu-item-link+.menu-item,:host::ng-deep .menu-list-wrapper .menu-item+tld-menu-item-link,:host::ng-deep .menu-list-wrapper .menu-item+.menu-item{margin-top:1.5625em}:host::ng-deep .menu-list-wrapper .child-list tld-menu-item-link{margin-top:1em}:host::ng-deep .menu-list-wrapper .menu-labels-visible{width:100%}: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:focus-visible{outline:black solid 2px}:host::ng-deep .menu-list-wrapper .menu-item:not(button):hover{font-weight:600}: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{color:var(--primary-accent)!important;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{padding-left:30px;margin:0}.mob-menu-item{width:100%}\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 [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 .child-list tld-menu-item-link{margin-top:1em}:host ::ng-deep .menu-list-wrapper .menu-item{cursor:pointer;font-style:normal;color:var(--base-40);text-decoration:none;align-items:center!important;font-weight:400;background:none;border:none}:host ::ng-deep .menu-list-wrapper .menu-item:not(button):hover{font-weight:600}: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{width:100%}\n"] }]
     }], null, { direction: [{
             type: Input
         }], labelsVisible: [{
@@ -644,7 +640,7 @@ class MenuColumnsComponent {
             this.activeItem = this.active.root;
         }
     }
-    static { this.ɵfac = function MenuColumnsComponent_Factory(t) { return new (t || MenuColumnsComponent)(i0.ɵɵdirectiveInject(i1$1.Router), i0.ɵɵdirectiveInject(MENU_SHARED_CONFIG, 8), i0.ɵɵdirectiveInject(MenuItemsService)); }; }
+    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) {
             i0.ɵɵtemplate(0, MenuColumnsComponent_ng_container_0_Template, 3, 2, "ng-container", 0);
         } if (rf & 2) {
@@ -671,18 +667,66 @@ class MenuColumnsComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MenuColumnsComponent, { className: "MenuColumnsComponent", filePath: "lib\\components\\menu-columns\\menu-columns.component.ts", lineNumber: 16 }); })();
 
 function SideNavMenuComponent_a_3_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "a", 7);
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "a", 10);
     i0.ɵɵpipe(1, "translate");
-    i0.ɵɵlistener("click", function SideNavMenuComponent_a_3_Template_a_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.logoClick($event)); });
-    i0.ɵɵelement(2, "img", 8);
+    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", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("libPlausibleEvent", ctx_r1.LOGOCLICK_PLAUSIBLE_EVENT)("href", ctx_r1.baseUrl, i0.ɵɵsanitizeUrl);
+    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.ɵɵadvance(2);
-    i0.ɵɵproperty("src", ctx_r1.menuLogoImage, i0.ɵɵsanitizeUrl);
+    i0.ɵɵproperty("src", ctx_r2.menuLogoImage, i0.ɵɵsanitizeUrl);
+} }
+function SideNavMenuComponent_button_9_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.username, " ");
+} }
+function SideNavMenuComponent_button_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "button", 12)(1, "div", 13);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, SideNavMenuComponent_button_9_span_3_Template, 2, 1, "span", 14);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    const menu_r4 = i0.ɵɵreference(11);
+    i0.ɵɵproperty("matMenuTriggerFor", menu_r4);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.userInitials, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.collapsed);
+} }
+function SideNavMenuComponent_button_12_span_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 18);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r6.icon);
+} }
+function SideNavMenuComponent_button_12_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function SideNavMenuComponent_button_12_Template_button_click_0_listener() { const item_r6 = i0.ɵɵrestoreView(_r5).$implicit; return i0.ɵɵresetView(item_r6.callback()); });
+    i0.ɵɵtemplate(1, SideNavMenuComponent_button_12_span_1_Template, 2, 1, "span", 17);
+    i0.ɵɵtext(2);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const item_r6 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", item_r6.icon);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, item_r6.label), " ");
 } }
 class SideNavMenuComponent extends NavBaseComponent {
     get menuLogoImage() {
@@ -698,6 +742,14 @@ class SideNavMenuComponent extends NavBaseComponent {
         this.strapiLinkService = strapiLinkService;
         this.domService = domService;
         this.menuItems = menuItems;
+        this.menuSettings = {
+            expandedWidth: '241px',
+            collapsedWidth: '56px',
+            menuLogo: '',
+            menuLogoCollapsed: '',
+            disableStrapi: false
+        };
+        this.collapsed = false;
         this.COLLAPSED_LOCAL_STORAGE_KEY = "TLD_MENU_SIDE_NAV_COLLAPSED";
         //#region Plausible event variables for collapse button
         this.COLLAPSE_PLAUSIBLE_EVENT_ID = "collapseMenu";
@@ -715,20 +767,12 @@ class SideNavMenuComponent extends NavBaseComponent {
             eventId: this.COLLAPSE_PLAUSIBLE_EVENT_ID,
             properties: [{ key: this.COLLAPSE_PLAUSIBLE_ACTION_KEY, value: "collapse" }]
         };
-        //#endregion
-        this.menuSettings = {
-            expandedWidth: '9.375em',
-            collapsedWidth: '5em',
-            menuLogo: '',
-            menuLogoCollapsed: '',
-            disableStrapi: false
-        };
-        this.collapsed = false;
         this.baseUrl = menuSharedConfig.baseUrl || '';
     }
     ngOnInit() {
         super.ngOnInit();
         this.getColapsedFromLocalStorage();
+        this.setUserInitials();
     }
     logoClick(event) {
         this.strapiLinkService.strapiLinkClick(event);
@@ -749,22 +793,40 @@ class SideNavMenuComponent extends NavBaseComponent {
         }
         this.domService.localStorage.setItem(this.COLLAPSED_LOCAL_STORAGE_KEY, this.collapsed.toString());
     }
-    static { this.ɵfac = function SideNavMenuComponent_Factory(t) { return new (t || 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: { menuSettings: "menuSettings" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 9, vars: 10, consts: [["fxLayout", "column", 1, "menu-container"], ["fxLayout", "column", "fxFlexFill", "", 1, "content"], ["fxLayout", "row", "fxLayoutAlign", "space-between center", 1, "menu-container-header"], ["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"], ["fxFlex", "3.125em", "fxLayoutAlign", "start center", 3, "click", "libPlausibleEvent", "href"], ["alt", "", 1, "menu-logo", 3, "src"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵtemplate(3, SideNavMenuComponent_a_3_Template, 3, 6, "a", 3);
-            i0.ɵɵelementStart(4, "button", 4);
-            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_4_listener() { return ctx.toggleCollapse(); });
+    setUserInitials() {
+        // displaying first letters of name and surname
+        const splittedUsername = this.username.split(' ');
+        if (splittedUsername.length === 1) {
+            // If there's only one word, use the first letter
+            this.userInitials = splittedUsername[0][0];
+            return;
+        }
+        // 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), 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: 13, vars: 13, consts: [["menu", "matMenu"], ["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"], ["mat-menu-item", "", "class", "profile-option", 3, "click", 4, "ngFor", "ngForOf"], ["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"], ["class", "profile-name", 4, "ngIf"], [1, "profile-name"], ["mat-menu-item", "", 1, "profile-option", 3, "click"], ["class", "material-icons profile-option-icon", 4, "ngIf"], [1, "material-icons", "profile-option-icon"]], template: function SideNavMenuComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
+            i0.ɵɵtemplate(3, SideNavMenuComponent_a_3_Template, 3, 6, "a", 4);
+            i0.ɵɵelementStart(4, "button", 5);
+            i0.ɵɵlistener("click", function SideNavMenuComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
             i0.ɵɵelementStart(5, "mat-icon");
             i0.ɵɵtext(6);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(7, "div", 5)(8, "menu-columns", 6);
-            i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_8_listener() { return ctx.toggleCollapse(); });
-            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(7, "div", 6)(8, "menu-columns", 7);
+            i0.ɵɵlistener("toggleCollapseEvent", function SideNavMenuComponent_Template_menu_columns_toggleCollapseEvent_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleCollapse()); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(9, SideNavMenuComponent_button_9_Template, 4, 3, "button", 8);
+            i0.ɵɵelementStart(10, "mat-menu", null, 0);
+            i0.ɵɵtemplate(12, SideNavMenuComponent_button_12_Template, 4, 4, "button", 9);
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵstyleProp("width", ctx.sideNavWidth);
             i0.ɵɵclassProp("collapsed", ctx.collapsed);
-            i0.ɵɵadvance(3);
+            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);
@@ -772,17 +834,23 @@ class SideNavMenuComponent extends NavBaseComponent {
             i0.ɵɵtextInterpolate(ctx.collapsed ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left");
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("direction", ctx.direction)("labelsVisible", !ctx.collapsed)("active", ctx.active);
-        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgIf, i2$1.MatIcon, i7.MatIconButton, i2.PlausibleEventDirective, MenuColumnsComponent, i9.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{height:100%;overflow:auto;background:var(--base-100);border-right:1px solid var(--base-70)}.menu-container[_ngcontent-%COMP%]   .menu-container-header[_ngcontent-%COMP%]{margin:24px 0}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]{padding:0 .8em}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .toggler[_ngcontent-%COMP%]{margin-right:-10px}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]   .menu-logo[_ngcontent-%COMP%]{max-width:100%}.menu-container[_ngcontent-%COMP%]   .divider[_ngcontent-%COMP%]{width:100%;margin:0}[_nghost-%COMP%]     .collapsed .menu-item{padding:calc(.125em + 1px)}[_nghost-%COMP%]     .collapsed .menu-item.active-menu-item{padding:.125em;border:1px solid var(--primary-accent);border-radius:var(--default-border-radius)}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}"] }); }
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.userInitials);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngForOf", ctx.menuSettings.userOptions);
+        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutAlignDirective, i2$2.FlexFillDirective, i2$2.DefaultFlexDirective, i3.NgForOf, i3.NgIf, i2$1.MatIcon, i7.MatIconButton, i8$1.MatMenu, i8$1.MatMenuItem, i8$1.MatMenuTrigger, i2.PlausibleEventDirective, MenuColumnsComponent, i8.TranslatePipe], styles: [".menu-container[_ngcontent-%COMP%]{height:100%;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}.menu-container[_ngcontent-%COMP%]   .content[_ngcontent-%COMP%]:not(.collapsed){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%;margin:0}.menu-container[_ngcontent-%COMP%]   .profile-wrapper[_ngcontent-%COMP%]{color:var(--base-40);display:flex;align-items:center;justify-content:center;margin:32px 0}.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%]{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%]     .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}[_nghost-%COMP%]  button.collapse-btn .mat-mdc-button-persistent-ripple, [_nghost-%COMP%]  button.toggler .mat-mdc-button-persistent-ripple{display:none}"] }); }
 }
 (() => { (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=\"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 class=\"menu-logo\" [src]=\"menuLogoImage\" alt=\"\" />\r\n      </a>\r\n\r\n      <button\r\n        mat-icon-button\r\n        class=\"toggler\"\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  </div>", styles: [".menu-container{height:100%;overflow:auto;background:var(--base-100);border-right:1px solid var(--base-70)}.menu-container .menu-container-header{margin:24px 0}.menu-container .content{padding:0 .8em}.menu-container .content .toggler{margin-right:-10px}.menu-container .content .menu-logo{max-width:100%}.menu-container .divider{width:100%;margin:0}:host ::ng-deep .collapsed .menu-item{padding:calc(.125em + 1px)}:host ::ng-deep .collapsed .menu-item.active-menu-item{padding:.125em;border:1px solid var(--primary-accent);border-radius:var(--default-border-radius)}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}\n"] }]
+        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        [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\" [matMenuTriggerFor]=\"menu\" class=\"profile-wrapper\">\r\n      <div class=\"profile-icon\">\r\n        {{userInitials}}\r\n      </div>\r\n\r\n      <span *ngIf=\"!collapsed\" class=\"profile-name\">\r\n        {{ username }}\r\n      </span>\r\n    </button>\r\n\r\n    <mat-menu #menu=\"matMenu\">\r\n      <button\r\n        mat-menu-item\r\n        class=\"profile-option\"\r\n        *ngFor=\"let item of menuSettings.userOptions\"\r\n        (click)=\"item.callback()\"\r\n      >\r\n        <span *ngIf=\"item.icon\" class=\"material-icons profile-option-icon\">{{item.icon}}</span>\r\n          {{ item.label | translate }}\r\n      </button>\r\n    </mat-menu>\r\n  </div>", styles: [".menu-container{height:100%;min-height:100vh;overflow:auto;background:var(--base-100);border-right:2px solid var(--base-95)}.menu-container .menu-container-header{margin:24px 0}.menu-container .content:not(.collapsed){padding:0 12px}.menu-container .content:not(.collapsed) .menu-logo{margin-left:16px;max-width:100%}.menu-container .divider{width:100%;margin:0}.menu-container .profile-wrapper{color:var(--base-40);display:flex;align-items:center;justify-content:center;margin:32px 0}.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{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 .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}:host::ng-deep button.collapse-btn .mat-mdc-button-persistent-ripple,:host::ng-deep button.toggler .mat-mdc-button-persistent-ripple{display:none}\n"] }]
     }], () => [{ type: i1.StrapiLinkService }, { type: i2.DOMService }, { type: MenuItemsService }, { type: undefined, decorators: [{
                 type: Optional
             }, {
                 type: Inject,
                 args: [MENU_SHARED_CONFIG]
-            }] }], { menuSettings: [{
+            }] }], { username: [{
+            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 }); })();
@@ -827,7 +895,7 @@ class ModalNavMenuComponent extends NavBaseComponent {
     close() {
         this.closeButtonClick.emit(null);
     }
-    static { this.ɵfac = function ModalNavMenuComponent_Factory(t) { return new (t || ModalNavMenuComponent)(i0.ɵɵdirectiveInject(MenuItemsService)); }; }
+    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);
@@ -848,7 +916,7 @@ class ModalNavMenuComponent extends NavBaseComponent {
             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, i9.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)}"] }); }
+        } }, 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,
@@ -928,7 +996,7 @@ class MenuItemIconComponent {
             this.iconService.registerIcons({ [this.iconName]: menuLogo });
         }
     }
-    static { this.ɵfac = function MenuItemIconComponent_Factory(t) { return new (t || MenuItemIconComponent)(i0.ɵɵdirectiveInject(i2.IconService), i0.ɵɵdirectiveInject(i1$1.Router)); }; }
+    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) {
@@ -958,11 +1026,11 @@ class MenuItemIconComponent {
             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, i7.MatButton, i7$1.MatMenu, i7$1.MatMenuTrigger, i2.PlausibleEventDirective, ModalNavMenuComponent, i9.TranslatePipe], styles: [".content[_ngcontent-%COMP%]{gap:1.5em;cursor:pointer}button.mat-mdc-icon-button[_ngcontent-%COMP%]{width:inherit}[_nghost-%COMP%]  button span.mat-button-focus-overlay{opacity:0!important}  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}"] }); }
+        } }, dependencies: [i2$2.DefaultLayoutDirective, i2$2.DefaultLayoutGapDirective, i2$2.DefaultLayoutAlignDirective, i2$2.DefaultFlexOrderDirective, i3.NgIf, i2$1.MatIcon, i7.MatButton, i8$1.MatMenu, i8$1.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}:host::ng-deep button span.mat-button-focus-overlay{opacity:0!important}::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"] }]
+        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']
@@ -979,17 +1047,12 @@ class MenuModule {
     static forRoot(config) {
         return {
             ngModule: MenuModule,
-            providers: [
-                { provide: MENU_SHARED_CONFIG, useValue: config }
-            ]
+            providers: [{ provide: MENU_SHARED_CONFIG, useValue: config }],
         };
     }
-    static { this.ɵfac = function MenuModule_Factory(t) { return new (t || MenuModule)(); }; }
+    static { this.ɵfac = function MenuModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MenuModule)(); }; }
     static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: MenuModule }); }
-    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [
-            StarpiMenuService
-        ], imports: [HttpClientModule,
-            FlexLayoutModule,
+    static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ providers: [StarpiMenuService, provideHttpClient(withInterceptorsFromDi())], imports: [FlexLayoutModule,
             RouterModule,
             CommonModule,
             MatTooltipModule,
@@ -1013,13 +1076,15 @@ class MenuModule {
                     MenuItemListComponent,
                     MenuColumnsComponent,
                     MenuIconComponent,
-                    MenuItemLinkComponent
+                    MenuItemLinkComponent,
                 ],
-                providers: [
-                    StarpiMenuService
+                exports: [
+                    SideNavMenuComponent,
+                    ModalNavMenuComponent,
+                    MenuItemIconComponent,
+                    MenuColumnsComponent,
                 ],
                 imports: [
-                    HttpClientModule,
                     FlexLayoutModule,
                     RouterModule,
                     CommonModule,
@@ -1031,14 +1096,9 @@ class MenuModule {
                     MatMenuModule,
                     MatIconModule,
                     TranslateModule,
-                    PlausibleModule
+                    PlausibleModule,
                 ],
-                exports: [
-                    SideNavMenuComponent,
-                    ModalNavMenuComponent,
-                    MenuItemIconComponent,
-                    MenuColumnsComponent,
-                ]
+                providers: [StarpiMenuService, provideHttpClient(withInterceptorsFromDi())],
             }]
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MenuModule, { declarations: [SideNavMenuComponent,
@@ -1048,8 +1108,7 @@ class MenuModule {
         MenuItemListComponent,
         MenuColumnsComponent,
         MenuIconComponent,
-        MenuItemLinkComponent], imports: [HttpClientModule,
-        FlexLayoutModule,
+        MenuItemLinkComponent], imports: [FlexLayoutModule,
         RouterModule,
         CommonModule,
         MatTooltipModule,