aril 0.0.65 → 0.0.67

package/theme/layout/app/layout/app.layout.component.ts

@@ -1,172 +1,172 @@
-import { NgClass } from '@angular/common';
-import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
-import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
-
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import { ConfirmPopupModule } from 'primeng/confirmpopup';
-import { DialogModule } from 'primeng/dialog';
-import { MessagesModule } from 'primeng/messages';
-import { ToastModule } from 'primeng/toast';
-
-import { Subscription, filter } from 'rxjs';
-
-import { LayoutService } from '../../service/app.layout.service';
-import { AppMenuService } from '../../service/app.menu.service';
-import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
-import { AppConfigComponent } from '../config/app.config.component';
-import { AppProfileSidebarComponent } from '../profileSidebar/app.profilesidebar.component';
-import { AppSidebarComponent } from '../sidebar/app.sidebar.component';
-import { AppTopbarComponent } from '../topbar/app.topbar.component';
-
-@Component({
-	standalone: true,
-	selector: 'app-layout',
-	imports: [
-		NgClass,
-		RouterOutlet,
-		ConfirmDialogModule,
-		ConfirmPopupModule,
-		DialogModule,
-		MessagesModule,
-		ToastModule,
-		AppSidebarComponent,
-		AppTopbarComponent,
-		AppBreadcrumbComponent,
-		AppProfileSidebarComponent,
-		AppConfigComponent
-	],
-	templateUrl: './app.layout.component.html'
-})
-export class AppLayoutComponent implements OnDestroy {
-	overlayMenuOpenSubscription: Subscription;
-
-	menuOutsideClickListener: any;
-
-	menuScrollListener: any;
-
-	globalThis: any = globalThis;
-
-	@ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
-
-	@ViewChild(AppTopbarComponent) appTopbar!: AppTopbarComponent;
-
-	constructor(
-		private menuService: AppMenuService,
-		public layoutService: LayoutService,
-		public renderer: Renderer2,
-		public router: Router
-	) {
-		this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
-			if (!this.menuOutsideClickListener) {
-				this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
-					const isOutsideClicked = !(
-						this.appSidebar.el.nativeElement.isSameNode(event.target) ||
-						this.appSidebar.el.nativeElement.contains(event.target) ||
-						this.appTopbar.menuButton.nativeElement.isSameNode(event.target) ||
-						this.appTopbar.menuButton.nativeElement.contains(event.target)
-					);
-					if (isOutsideClicked) {
-						this.hideMenu();
-					}
-				});
-			}
-
-			if (
-				(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus()) &&
-				!this.menuScrollListener
-			) {
-				this.menuScrollListener = this.renderer.listen(
-					this.appSidebar.menuContainer.nativeElement,
-					'scroll',
-					(event) => {
-						if (this.layoutService.isDesktop()) {
-							this.hideMenu();
-						}
-					}
-				);
-			}
-
-			if (this.layoutService.state.staticMenuMobileActive) {
-				this.blockBodyScroll();
-			}
-		});
-
-		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
-			this.hideMenu();
-		});
-	}
-
-	blockBodyScroll(): void {
-		if (document.body.classList) {
-			document.body.classList.add('blocked-scroll');
-		} else {
-			document.body.className += ' blocked-scroll';
-		}
-	}
-
-	unblockBodyScroll(): void {
-		if (document.body.classList) {
-			document.body.classList.remove('blocked-scroll');
-		} else {
-			document.body.className = document.body.className.replace(
-				new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'),
-				' '
-			);
-		}
-	}
-
-	hideMenu() {
-		this.layoutService.state.overlayMenuActive = false;
-		this.layoutService.state.staticMenuMobileActive = false;
-		this.layoutService.state.menuHoverActive = false;
-		this.menuService.reset();
-
-		if (this.menuOutsideClickListener) {
-			this.menuOutsideClickListener();
-			this.menuOutsideClickListener = null;
-		}
-
-		if (this.menuScrollListener) {
-			this.menuScrollListener();
-			this.menuScrollListener = null;
-		}
-
-		this.unblockBodyScroll();
-	}
-
-	get containerClass() {
-		return {
-			'layout-light': this.layoutService.config().colorScheme === 'light',
-			'layout-dim': this.layoutService.config().colorScheme === 'dim',
-			'layout-dark': this.layoutService.config().colorScheme === 'dark',
-			'layout-colorscheme-menu': this.layoutService.config().menuTheme === 'colorScheme',
-			'layout-primarycolor-menu': this.layoutService.config().menuTheme === 'primaryColor',
-			'layout-transparent-menu': this.layoutService.config().menuTheme === 'transparent',
-			'layout-overlay': this.layoutService.config().menuMode === 'overlay',
-			'layout-static': this.layoutService.config().menuMode === 'static',
-			'layout-slim': this.layoutService.config().menuMode === 'slim',
-			'layout-slim-plus': this.layoutService.config().menuMode === 'slim-plus',
-			'layout-horizontal': this.layoutService.config().menuMode === 'horizontal',
-			'layout-reveal': this.layoutService.config().menuMode === 'reveal',
-			'layout-drawer': this.layoutService.config().menuMode === 'drawer',
-			'layout-static-inactive':
-				this.layoutService.state.staticMenuDesktopInactive && this.layoutService.config().menuMode === 'static',
-			'layout-overlay-active': this.layoutService.state.overlayMenuActive,
-			'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
-			'p-input-filled': this.layoutService.config().inputStyle === 'filled',
-			'p-ripple-disabled': !this.layoutService.config().ripple,
-			'layout-sidebar-active': this.layoutService.state.sidebarActive,
-			'layout-sidebar-anchored': this.layoutService.state.anchored
-		};
-	}
-
-	ngOnDestroy() {
-		if (this.overlayMenuOpenSubscription) {
-			this.overlayMenuOpenSubscription.unsubscribe();
-		}
-
-		if (this.menuOutsideClickListener) {
-			this.menuOutsideClickListener();
-		}
-	}
-}
+import { NgClass } from '@angular/common';
+import { Component, OnDestroy, Renderer2, ViewChild } from '@angular/core';
+import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmPopupModule } from 'primeng/confirmpopup';
+import { DialogModule } from 'primeng/dialog';
+import { MessagesModule } from 'primeng/messages';
+import { ToastModule } from 'primeng/toast';
+
+import { Subscription, filter } from 'rxjs';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { AppMenuService } from '../../service/app.menu.service';
+import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
+import { AppConfigComponent } from '../config/app.config.component';
+import { AppProfileSidebarComponent } from '../profileSidebar/app.profilesidebar.component';
+import { AppSidebarComponent } from '../sidebar/app.sidebar.component';
+import { AppTopbarComponent } from '../topbar/app.topbar.component';
+
+@Component({
+	standalone: true,
+	selector: 'app-layout',
+	imports: [
+		NgClass,
+		RouterOutlet,
+		ConfirmDialogModule,
+		ConfirmPopupModule,
+		DialogModule,
+		MessagesModule,
+		ToastModule,
+		AppSidebarComponent,
+		AppTopbarComponent,
+		AppBreadcrumbComponent,
+		AppProfileSidebarComponent,
+		AppConfigComponent
+	],
+	templateUrl: './app.layout.component.html'
+})
+export class AppLayoutComponent implements OnDestroy {
+	overlayMenuOpenSubscription: Subscription;
+
+	menuOutsideClickListener: any;
+
+	menuScrollListener: any;
+
+	globalThis: any = globalThis;
+
+	@ViewChild(AppSidebarComponent) appSidebar!: AppSidebarComponent;
+
+	@ViewChild(AppTopbarComponent) appTopbar!: AppTopbarComponent;
+
+	constructor(
+		private menuService: AppMenuService,
+		public layoutService: LayoutService,
+		public renderer: Renderer2,
+		public router: Router
+	) {
+		this.overlayMenuOpenSubscription = this.layoutService.overlayOpen$.subscribe(() => {
+			if (!this.menuOutsideClickListener) {
+				this.menuOutsideClickListener = this.renderer.listen('document', 'click', (event) => {
+					const isOutsideClicked = !(
+						this.appSidebar.el.nativeElement.isSameNode(event.target) ||
+						this.appSidebar.el.nativeElement.contains(event.target) ||
+						this.appTopbar.menuButton.nativeElement.isSameNode(event.target) ||
+						this.appTopbar.menuButton.nativeElement.contains(event.target)
+					);
+					if (isOutsideClicked) {
+						this.hideMenu();
+					}
+				});
+			}
+
+			if (
+				(this.layoutService.isHorizontal() || this.layoutService.isSlim() || this.layoutService.isSlimPlus()) &&
+				!this.menuScrollListener
+			) {
+				this.menuScrollListener = this.renderer.listen(
+					this.appSidebar.menuContainer.nativeElement,
+					'scroll',
+					(event) => {
+						if (this.layoutService.isDesktop()) {
+							this.hideMenu();
+						}
+					}
+				);
+			}
+
+			if (this.layoutService.state.staticMenuMobileActive) {
+				this.blockBodyScroll();
+			}
+		});
+
+		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
+			if (!this.layoutService.mfeAppItemClicked()) this.hideMenu();
+		});
+	}
+
+	blockBodyScroll(): void {
+		if (document.body.classList) {
+			document.body.classList.add('blocked-scroll');
+		} else {
+			document.body.className += ' blocked-scroll';
+		}
+	}
+
+	unblockBodyScroll(): void {
+		if (document.body.classList) {
+			document.body.classList.remove('blocked-scroll');
+		} else {
+			document.body.className = document.body.className.replace(
+				new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'),
+				' '
+			);
+		}
+	}
+
+	hideMenu() {
+		this.layoutService.state.overlayMenuActive = false;
+		this.layoutService.state.staticMenuMobileActive = false;
+		this.layoutService.state.menuHoverActive = false;
+		this.menuService.reset();
+
+		if (this.menuOutsideClickListener) {
+			this.menuOutsideClickListener();
+			this.menuOutsideClickListener = null;
+		}
+
+		if (this.menuScrollListener) {
+			this.menuScrollListener();
+			this.menuScrollListener = null;
+		}
+
+		this.unblockBodyScroll();
+	}
+
+	get containerClass() {
+		return {
+			'layout-light': this.layoutService.config().colorScheme === 'light',
+			'layout-dim': this.layoutService.config().colorScheme === 'dim',
+			'layout-dark': this.layoutService.config().colorScheme === 'dark',
+			'layout-colorscheme-menu': this.layoutService.config().menuTheme === 'colorScheme',
+			'layout-primarycolor-menu': this.layoutService.config().menuTheme === 'primaryColor',
+			'layout-transparent-menu': this.layoutService.config().menuTheme === 'transparent',
+			'layout-overlay': this.layoutService.config().menuMode === 'overlay',
+			'layout-static': this.layoutService.config().menuMode === 'static',
+			'layout-slim': this.layoutService.config().menuMode === 'slim',
+			'layout-slim-plus': this.layoutService.config().menuMode === 'slim-plus',
+			'layout-horizontal': this.layoutService.config().menuMode === 'horizontal',
+			'layout-reveal': this.layoutService.config().menuMode === 'reveal',
+			'layout-drawer': this.layoutService.config().menuMode === 'drawer',
+			'layout-static-inactive':
+				this.layoutService.state.staticMenuDesktopInactive && this.layoutService.config().menuMode === 'static',
+			'layout-overlay-active': this.layoutService.state.overlayMenuActive,
+			'layout-mobile-active': this.layoutService.state.staticMenuMobileActive,
+			'p-input-filled': this.layoutService.config().inputStyle === 'filled',
+			'p-ripple-disabled': !this.layoutService.config().ripple,
+			'layout-sidebar-active': this.layoutService.state.sidebarActive,
+			'layout-sidebar-anchored': this.layoutService.state.anchored
+		};
+	}
+
+	ngOnDestroy() {
+		if (this.overlayMenuOpenSubscription) {
+			this.overlayMenuOpenSubscription.unsubscribe();
+		}
+
+		if (this.menuOutsideClickListener) {
+			this.menuOutsideClickListener();
+		}
+	}
+}

package/theme/layout/app/layout/mfe.layout.component.d.ts

@@ -1,8 +1,7 @@
-import { AfterViewInit, OnDestroy } from '@angular/core';
+import { AfterViewInit } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class MFELayoutComponent implements AfterViewInit, OnDestroy {
+export declare class MFELayoutComponent implements AfterViewInit {
     ngAfterViewInit(): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MFELayoutComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MFELayoutComponent, "mfe-layout", never, {}, {}, never, never, true, never>;
 }

package/theme/layout/app/layout/mfe.layout.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
@@ -13,7 +13,7 @@ import { AppSubMenuComponent } from '../menu/app.menu.component';
 	standalone: true,
 	selector: 'mfe-layout',
 	template: `
-		<app-sub-menu hidden></app-sub-menu>
+		<!-- <app-sub-menu hidden></app-sub-menu> -->
 
 		<router-outlet />
 
@@ -33,17 +33,12 @@ import { AppSubMenuComponent } from '../menu/app.menu.component';
 		AppSubMenuComponent
 	]
 })
-export class MFELayoutComponent implements AfterViewInit, OnDestroy {
+export class MFELayoutComponent implements AfterViewInit {
 	ngAfterViewInit(): void {
-		setTimeout(() => {
-			const appSidebar = document.getElementsByTagName('app-sidebar')[0];
-			const subMenu = document.getElementById('app-sub-menu-' + (<any>globalThis).activeMF) as HTMLElement;
-			subMenu.removeAttribute('hidden');
-			appSidebar.append(subMenu);
-		}, 10);
-	}
-
-	ngOnDestroy(): void {
-		document.getElementById('app-sub-menu-' + (<any>globalThis).activeMF)?.remove();
+		// const appMenu = document.querySelector('app-menu>ul>li>ul#' + (<any>globalThis).activeMF);
+		// const subMenuId = 'app-sub-menu-' + (<any>globalThis).activeMF;
+		// const subMenu = document.getElementById(subMenuId) as HTMLElement;
+		// appMenu?.replaceChildren(...Array.from(subMenu.children));
+		// document.querySelector(subMenuId)?.remove();
 	}
 }

package/theme/layout/app/menu/app.menu.component.d.ts

@@ -1,5 +1,5 @@
 import { AnimationEvent } from '@angular/animations';
-import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { MenuItem } from 'primeng/api';
 import { Subscription } from 'rxjs';
@@ -8,7 +8,6 @@ import { AppMenuService } from '../../service/app.menu.service';
 import * as i0 from "@angular/core";
 export declare class AppMenuItemComponent implements OnInit, OnDestroy {
     layoutService: LayoutService;
-    private cd;
     router: Router;
     menuService: AppMenuService;
     item: MenuItem;
@@ -20,7 +19,7 @@ export declare class AppMenuItemComponent implements OnInit, OnDestroy {
     menuSourceSubscription: Subscription;
     menuResetSubscription: Subscription;
     key: string;
-    constructor(layoutService: LayoutService, cd: ChangeDetectorRef, router: Router, menuService: AppMenuService);
+    constructor(layoutService: LayoutService, router: Router, menuService: AppMenuService);
     ngOnInit(): void;
     ngAfterViewChecked(): void;
     updateActiveStateFromRoute(): void;
@@ -39,6 +38,8 @@ export declare class AppMenuItemComponent implements OnInit, OnDestroy {
 }
 export declare class AppMenuComponent {
     menuService: AppMenuService;
+    isHostMode: any;
+    hostMenuItems: any;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppMenuComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AppMenuComponent, "app-menu", never, {}, {}, never, never, true, never>;
 }

package/theme/layout/app/menu/app.menu.component.html

@@ -1,5 +1,5 @@
 <ul class="layout-menu flex-wrap">
-	@for (item of menuService.menuItems(); track $index) {
+	@for (item of isHostMode ? hostMenuItems() : menuService.menuItems(); track $index) {
 		@if (item.separator) {
 			<li class="menu-separator"></li>
 		} @else {

package/theme/layout/app/menu/app.menu.component.ts

@@ -1,16 +1,6 @@
 import { AnimationEvent, animate, state, style, transition, trigger } from '@angular/animations';
 import { NgClass } from '@angular/common';
-import {
-	ChangeDetectorRef,
-	Component,
-	ElementRef,
-	HostBinding,
-	Input,
-	OnDestroy,
-	OnInit,
-	ViewChild,
-	inject
-} from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
 import { NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 
 import { MenuItem } from 'primeng/api';
@@ -127,7 +117,7 @@ import { AppMenuService } from '../../service/app.menu.service';
 			transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
 		])
 	],
-	styles: ['.active-root-menu-item { background-color: rgba(2, 2, 2, .3) }']
+	styles: ['.active-root-menu-item { background-color: var(--primary-color); & > i,span { color: white !important } }']
 })
 export class AppMenuItemComponent implements OnInit, OnDestroy {
 	@Input() item!: MenuItem;
@@ -150,7 +140,6 @@ export class AppMenuItemComponent implements OnInit, OnDestroy {
 
 	constructor(
 		public layoutService: LayoutService,
-		private cd: ChangeDetectorRef,
 		public router: Router,
 		public menuService: AppMenuService
 	) {
@@ -172,14 +161,19 @@ export class AppMenuItemComponent implements OnInit, OnDestroy {
 
 		this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((params: any) => {
 			if (this.isSlimPlus || this.isSlim || this.isHorizontal) {
-				this.active = false;
+				if (!this.layoutService.mfeAppItemClicked()) this.active = false;
 			} else {
 				if (this.item.routerLink) {
 					this.updateActiveStateFromRoute();
 				}
 			}
 
-			if (this.item.routerLink === params.url) {
+			if (
+				this.item['path'] === params.url ||
+				this.item.routerLink === params.url ||
+				this.item.routerLink === params.urlAfterRedirects ||
+				this.item['remoteName'] === params.url.substring(1)
+			) {
 				this.menuService.activeRootMenuItemKey.set(this.key.charAt(0));
 			}
 		});
@@ -271,6 +265,12 @@ export class AppMenuItemComponent implements OnInit, OnDestroy {
 
 			if (this.root && this.active && (this.isSlim || this.isHorizontal || this.isSlimPlus)) {
 				this.layoutService.onOverlaySubmenuOpen();
+
+				if (this.item['mfeApp']) {
+					this.layoutService.mfeAppItemClicked.set(true);
+				} else {
+					this.layoutService.mfeAppItemClicked.set(false);
+				}
 			}
 		} else {
 			if (this.layoutService.isMobile()) {
@@ -288,6 +288,8 @@ export class AppMenuItemComponent implements OnInit, OnDestroy {
 
 	onMouseEnter() {
 		// activate item on hover
+		if ((<any>globalThis).isHostMode && !this.item.items?.length) return;
+
 		if (this.root && (this.isSlim || this.isHorizontal || this.isSlimPlus) && this.layoutService.isDesktop()) {
 			if (this.layoutService.state.menuHoverActive) {
 				this.active = true;
@@ -346,6 +348,8 @@ export class AppMenuItemComponent implements OnInit, OnDestroy {
 })
 export class AppMenuComponent {
 	menuService = inject(AppMenuService);
+	isHostMode = (<any>globalThis).isHostMode;
+	hostMenuItems = (<any>globalThis).hostMenuItems;
 }
 @Component({
 	standalone: true,

package/theme/layout/app/menu/app.sub.menu.component.html

@@ -1,13 +1,7 @@
-<div class="layout-sidebar" style="margin-left: 8rem">
-	<div #subMenuContainer class="layout-menu-container">
-		<ul class="layout-menu flex-wrap" style="margin-top: 6.5rem">
-			@for (subItem of menuService.subMenuItems(); track $index) {
-				@if (subItem.separator) {
-					<li class="menu-separator"></li>
-				} @else {
-					<li app-menuitem [item]="subItem" [index]="$index" [root]="true"></li>
-				}
-			}
-		</ul>
-	</div>
-</div>
+@for (subItem of menuService.subMenuItems(); track $index) {
+	@if (subItem.separator) {
+		<li class="menu-separator"></li>
+	} @else {
+		<li app-menuitem [item]="subItem" [index]="$index" [root]="false"></li>
+	}
+}

package/theme/layout/app/profileSidebar/app.profilesidebar.component.d.ts

@@ -1,5 +1,5 @@
-import { LayoutService } from '../../service/app.layout.service';
 import { KeycloakManager } from 'aril/keycloak';
+import { LayoutService } from '../../service/app.layout.service';
 import * as i0 from "@angular/core";
 export declare class AppProfileSidebarComponent {
     layoutService: LayoutService;

package/theme/layout/app/profileSidebar/app.profilesidebar.component.ts

@@ -3,9 +3,10 @@ import { Component, inject } from '@angular/core';
 import { SidebarModule } from 'primeng/sidebar';
 import { TagModule } from 'primeng/tag';
 
-import { LayoutService } from '../../service/app.layout.service';
 import { KeycloakManager } from 'aril/keycloak';
 
+import { LayoutService } from '../../service/app.layout.service';
+
 @Component({
 	standalone: true,
 	selector: 'app-profilemenu',
@@ -14,11 +15,10 @@ import { KeycloakManager } from 'aril/keycloak';
 })
 export class AppProfileSidebarComponent {
 	keyCloakManager = inject(KeycloakManager);
-	username :any;
+	username: any;
 
 	constructor(public layoutService: LayoutService) {
 		this.username = this.keyCloakManager.getUsername();
-		console.log(this.username,"username")
 	}
 
 	get visible(): boolean {

package/theme/layout/app/sidebar/app.sidebar.component.ts

@@ -1,44 +1,44 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
-import { RouterLink } from '@angular/router';
-
-import { LayoutService } from '../../service/app.layout.service';
-import { AppMenuComponent } from '../menu/app.menu.component';
-
-@Component({
-	standalone: true,
-	selector: 'app-sidebar',
-	imports: [RouterLink, AppMenuComponent],
-	templateUrl: './app.sidebar.component.html'
-})
-export class AppSidebarComponent {
-	constructor(
-		public layoutService: LayoutService,
-		public el: ElementRef
-	) {}
-
-	timeout: any = null;
-
-	@ViewChild('menuContainer') menuContainer!: ElementRef;
-
-	onMouseEnter() {
-		if (!this.layoutService.state.anchored) {
-			if (this.timeout) {
-				clearTimeout(this.timeout);
-				this.timeout = null;
-			}
-			this.layoutService.state.sidebarActive = true;
-		}
-	}
-
-	onMouseLeave() {
-		if (!this.layoutService.state.anchored) {
-			if (!this.timeout) {
-				this.timeout = setTimeout(() => (this.layoutService.state.sidebarActive = false), 300);
-			}
-		}
-	}
-
-	anchor() {
-		this.layoutService.state.anchored = !this.layoutService.state.anchored;
-	}
-}
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { RouterLink } from '@angular/router';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { AppMenuComponent } from '../menu/app.menu.component';
+
+@Component({
+	standalone: true,
+	selector: 'app-sidebar',
+	imports: [RouterLink, AppMenuComponent],
+	templateUrl: './app.sidebar.component.html'
+})
+export class AppSidebarComponent {
+	constructor(
+		public layoutService: LayoutService,
+		public el: ElementRef
+	) {}
+
+	timeout: any = null;
+
+	@ViewChild('menuContainer') menuContainer!: ElementRef;
+
+	onMouseEnter() {
+		if (!this.layoutService.state.anchored) {
+			if (this.timeout) {
+				clearTimeout(this.timeout);
+				this.timeout = null;
+			}
+			this.layoutService.state.sidebarActive = true;
+		}
+	}
+
+	onMouseLeave() {
+		if (!this.layoutService.state.anchored) {
+			if (!this.timeout) {
+				this.timeout = setTimeout(() => (this.layoutService.state.sidebarActive = false), 300);
+			}
+		}
+	}
+
+	anchor() {
+		this.layoutService.state.anchored = !this.layoutService.state.anchored;
+	}
+}