aril 1.2.18 → 2.0.1-dev.0

package/theme/layout/app/expandableMenu/expandable-menu.component.d.ts

@@ -7,11 +7,9 @@ import { Subscription } from 'rxjs';
 import { PluginMenuItem } from 'aril/boot/config/apps';
 import { TranslateJsonPipe } from 'aril/util/pipes';
 import { LayoutService } from '../../service/app.layout.service';
-import { AppMenuService } from '../../service/app.menu.service';
 import * as i0 from "@angular/core";
 export declare class ExpandableMenuComponent implements OnInit, OnDestroy {
     private translateJsonPipe;
-    private menuService;
     private router;
     private keycloak;
     private translocoService;
@@ -50,7 +48,8 @@ export declare class ExpandableMenuComponent implements OnInit, OnDestroy {
     private readonly MAX_LENGTH;
     actionLoadingItems: Set<string>;
     private actionSubscription;
-    constructor(translateJsonPipe: TranslateJsonPipe, menuService: AppMenuService, router: Router, keycloak: KeycloakService, translocoService: TranslocoService, layoutService: LayoutService, http: HttpClient);
+    private readonly navService;
+    constructor(translateJsonPipe: TranslateJsonPipe, router: Router, keycloak: KeycloakService, translocoService: TranslocoService, layoutService: LayoutService, http: HttpClient);
     get selectedMainItem(): number | null;
     get secondarySidebarExpanded(): boolean;
     isTextTruncated(label: any, lang: string | null, menuType?: 'main' | 'secondary' | 'tertiary' | 'nested'): boolean;
@@ -61,18 +60,36 @@ export declare class ExpandableMenuComponent implements OnInit, OnDestroy {
     updateMenuFromRootKey(index: number): void;
     updateMenuItems(): void;
     getMenuItems(): PluginMenuItem[];
-    selectMainItem(index: number, item: PluginMenuItem): void;
+    selectMainItem(event: MouseEvent, index: number, item: PluginMenuItem): void;
     toggleSecondarySidebar(): void;
     isMobile(): boolean;
     onResize(): void;
     updateActiveMenuFromCurrentRoute(): void;
     isHaveSelectedChildItem(item: PluginMenuItem): boolean;
     getLocalText(text: any): string;
+    /**
+     * Hash strategy için routerLink'i `#`-prefix'li href'e çevirir. routerLink config'te
+     * leading slash içerebilir (örn. anasayfa için `'/'`); naive `'#/' + routerLink`
+     * concatenation `#//` üretirdi — sağ tık "linki kopyala" UX'inde bu çirkin görünür.
+     */
+    getHashHref(routerLink: string | undefined | null): string;
     getActionItemKey(item: PluginMenuItem): string;
     isActionLoading(item: PluginMenuItem): boolean;
     onActionItemClick(item: PluginMenuItem, event?: Event): void;
     private buildSuccessRoute;
     private getValueByPath;
+    /**
+     * Chrome-like menü click davranışı (secondary/tertiary/nested seviyeleri için):
+     * - Normal click → aktif tab'da navigate
+     * - Ctrl/Cmd + Click → arka planda yeni tab
+     * - Ctrl/Cmd + Shift + Click → ön planda yeni tab
+     */
+    onMenuClick(event: MouseEvent, item: PluginMenuItem): void;
+    /** Middle click (button 1) → arka planda yeni tab. */
+    onMenuAuxClick(event: MouseEvent, item: PluginMenuItem): void;
+    /** Middle click default scroll davranışını engelle. */
+    onMenuMousedown(event: MouseEvent): void;
+    private dispatchNavigation;
     toggleSidebar(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ExpandableMenuComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ExpandableMenuComponent, "app-expandable-menu", never, {}, {}, never, never, true, never>;

package/theme/layout/app/expandableMenu/expandable-menu.component.html

@@ -7,7 +7,9 @@
 					@if(!item.separator){
 						<li
 						[ngClass]="{'active': isActiveRoute(item) || isHaveSelectedChildItem(item)}"
-						(click)="selectMainItem(i, item)"
+						(click)="selectMainItem($event, i, item)"
+						(auxclick)="onMenuAuxClick($event, item)"
+						(mousedown)="onMenuMousedown($event)"
 						[pTooltip]="(item.label && activeLang() ? item.label[activeLang()!] || '' : '')"
 						tooltipPosition="right">
 						<div class="main-menu-item">
@@ -55,7 +57,11 @@
 								} @else {
 								<!-- Regular menu item -->
 								<li class="secondary-menu-item" [ngClass]="{'active': isActiveRoute(subItem)}">
-									<a [routerLink]="subItem.routerLink" 
+									<a [attr.href]="subItem.routerLink ? getHashHref(subItem.routerLink) : null"
+										[arilNavLink]="{ tabId: '', navLink: subItem.routerLink || '', navName: getLocalText(subItem.label), icon: subItem.icon }"
+										(click)="onMenuClick($event, subItem)"
+										(auxclick)="onMenuAuxClick($event, subItem)"
+										(mousedown)="onMenuMousedown($event)"
 										class="secondary-menu-link"
 										[pTooltip]="!isMobile() && isTextTruncated(subItem.label, activeLang(), 'secondary') ? (subItem.label && activeLang() ? subItem.label[activeLang()!] || '' : '') : ''"
 										tooltipPosition="right">
@@ -82,7 +88,11 @@
 													</li>
 												} @else {
 												<li class="tertiary-menu-item" [ngClass]="{'active': isActiveRoute(childItem)}">
-													<a [routerLink]="childItem.routerLink" 
+													<a [attr.href]="childItem.routerLink ? getHashHref(childItem.routerLink) : null"
+														[arilNavLink]="{ tabId: '', navLink: childItem.routerLink || '', navName: getLocalText(childItem.label), icon: childItem.icon }"
+														(click)="onMenuClick($event, childItem)"
+														(auxclick)="onMenuAuxClick($event, childItem)"
+														(mousedown)="onMenuMousedown($event)"
 														class="tertiary-menu-link"
 														[pTooltip]="!isMobile() && isTextTruncated(childItem.label, activeLang(), 'tertiary') ? (childItem.label && activeLang() ? childItem.label[activeLang()!] || '' : '') : ''"
 														tooltipPosition="right">
@@ -106,10 +116,14 @@
 																		</a>
 																	</li>
 																} @else {
-																<li 
+																<li
 																	class="nested-menu-item"
 																	[ngClass]="{'active': isActiveRoute(nestedItem)}">
-																	<a [routerLink]="nestedItem.routerLink" 
+																	<a [attr.href]="nestedItem.routerLink ? getHashHref(nestedItem.routerLink) : null"
+																		[arilNavLink]="{ tabId: '', navLink: nestedItem.routerLink || '', navName: getLocalText(nestedItem.label), icon: nestedItem.icon }"
+																		(click)="onMenuClick($event, nestedItem)"
+																		(auxclick)="onMenuAuxClick($event, nestedItem)"
+																		(mousedown)="onMenuMousedown($event)"
 																		class="nested-menu-link"
 																		[pTooltip]="!isMobile() && isTextTruncated(nestedItem.label, activeLang(), 'nested') ? (nestedItem.label && activeLang() ? nestedItem.label[activeLang()!] || '' : '') : ''"
 																		tooltipPosition="right">

package/theme/layout/app/expandableMenu/expandable-menu.component.ts

@@ -1,8 +1,8 @@
 import { NgClass } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { Component, HostListener, OnDestroy, OnInit, Signal } from '@angular/core';
+import { Component, HostListener, OnDestroy, OnInit, Signal, inject } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { NavigationEnd, Router, RouterLink } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
 
 import { TooltipModule } from 'primeng/tooltip';
 
@@ -11,16 +11,15 @@ import { KeycloakService } from 'keycloak-angular';
 import { Subscription, filter } from 'rxjs';
 
 import { bridge } from 'aril/boot/bridge';
-import { PluginMenuItem } from 'aril/boot/config/apps';
+import { NavItem, NavLinkDirective, NavService, PluginMenuItem } from 'aril/boot/config/apps';
 import { TranslateJsonPipe } from 'aril/util/pipes';
 
 import { LayoutService } from '../../service/app.layout.service';
-import { AppMenuService } from '../../service/app.menu.service';
 
 @Component({
 	standalone: true,
 	selector: 'app-expandable-menu',
-	imports: [RouterLink, NgClass, TooltipModule],
+	imports: [NgClass, TooltipModule, NavLinkDirective],
 	templateUrl: 'expandable-menu.component.html',
 	providers: [TranslateJsonPipe]
 })
@@ -73,10 +72,10 @@ export class ExpandableMenuComponent implements OnInit, OnDestroy {
 
 	actionLoadingItems = new Set<string>();
 	private actionSubscription: Subscription | null = null;
+	private readonly navService = inject(NavService);
 
 	constructor(
 		private translateJsonPipe: TranslateJsonPipe,
-		private menuService: AppMenuService,
 		private router: Router,
 		private keycloak: KeycloakService,
 		private translocoService: TranslocoService,
@@ -195,14 +194,14 @@ export class ExpandableMenuComponent implements OnInit, OnDestroy {
 	}
 
 	updateMenuItems(): void {
-		this.cachedMenuItems = bridge.isHostMode() ? bridge.hostMenuItems() : this.menuService.menuItems();
+		this.cachedMenuItems = bridge.hostMenuItems();
 	}
 
 	getMenuItems(): PluginMenuItem[] {
 		return this.cachedMenuItems;
 	}
 
-	selectMainItem(index: number, item: PluginMenuItem): void {
+	selectMainItem(event: MouseEvent, index: number, item: PluginMenuItem): void {
 		// Handle action items at top level
 		if (item.action && (!item.items || item.items.length === 0)) {
 			this.onActionItemClick(item);
@@ -213,7 +212,12 @@ export class ExpandableMenuComponent implements OnInit, OnDestroy {
 			this.layoutService.setSecondarySidebarExpanded(false);
 			this.layoutService.setSelectedMainItem(index);
 			this.selectedMainMenuItem = item;
-			this.router.navigate([item.routerLink]);
+			this.dispatchNavigation(event, {
+				tabId: '',
+				navLink: item.routerLink,
+				navName: this.getLocalText(item.label),
+				icon: item.icon
+			});
 			return;
 		}
 
@@ -296,6 +300,16 @@ export class ExpandableMenuComponent implements OnInit, OnDestroy {
 		return this.translateJsonPipe.transform(text);
 	}
 
+	/**
+	 * Hash strategy için routerLink'i `#`-prefix'li href'e çevirir. routerLink config'te
+	 * leading slash içerebilir (örn. anasayfa için `'/'`); naive `'#/' + routerLink`
+	 * concatenation `#//` üretirdi — sağ tık "linki kopyala" UX'inde bu çirkin görünür.
+	 */
+	getHashHref(routerLink: string | undefined | null): string {
+		if (!routerLink) return '#';
+		return routerLink.startsWith('/') ? '#' + routerLink : '#/' + routerLink;
+	}
+
 	getActionItemKey(item: PluginMenuItem): string {
 		return item.action?.url + '|' + item.action?.successRoute;
 	}
@@ -362,6 +376,52 @@ export class ExpandableMenuComponent implements OnInit, OnDestroy {
 		}, obj);
 	}
 
+	/**
+	 * Chrome-like menü click davranışı (secondary/tertiary/nested seviyeleri için):
+	 * - Normal click → aktif tab'da navigate
+	 * - Ctrl/Cmd + Click → arka planda yeni tab
+	 * - Ctrl/Cmd + Shift + Click → ön planda yeni tab
+	 */
+	onMenuClick(event: MouseEvent, item: PluginMenuItem): void {
+		if (!item.routerLink) return;
+		event.preventDefault();
+		this.dispatchNavigation(event, {
+			tabId: '',
+			navLink: item.routerLink,
+			navName: this.getLocalText(item.label),
+			icon: item.icon
+		});
+	}
+
+	/** Middle click (button 1) → arka planda yeni tab. */
+	onMenuAuxClick(event: MouseEvent, item: PluginMenuItem): void {
+		if (event.button !== 1 || !item.routerLink) return;
+		event.preventDefault();
+		this.navService.openInBackgroundTab({
+			tabId: '',
+			navLink: item.routerLink,
+			navName: this.getLocalText(item.label),
+			icon: item.icon
+		});
+	}
+
+	/** Middle click default scroll davranışını engelle. */
+	onMenuMousedown(event: MouseEvent): void {
+		if (event.button === 1) event.preventDefault();
+	}
+
+	private dispatchNavigation(event: MouseEvent, navItem: NavItem): void {
+		if (event.ctrlKey || event.metaKey) {
+			if (event.shiftKey) {
+				this.navService.openInNewTabAndFocus(navItem);
+			} else {
+				this.navService.openInBackgroundTab(navItem);
+			}
+		} else {
+			this.navService.navigateInCurrentTab(navItem);
+		}
+	}
+
 	toggleSidebar() {
 		// Eğer seçili bir ana menü öğesi varsa ve alt menüleri varsa toggle yapabiliriz
 		if (this.selectedMainMenuItem && this.selectedMainMenuItem.items && this.selectedMainMenuItem.items.length > 0) {

package/theme/layout/app/favorite-pages/favorite-pages-sidebar.component.html

@@ -51,6 +51,7 @@
 							<div
 								class="favorite-item"
 								[class.default-item]="favorite.id < 0"
+								[arilNavLink]="{ tabId: '', navLink: favorite.url, navName: favorite.label }"
 								(click)="navigateToFavorite(favorite)"
 								[pTooltip]="getFullUrl(favorite.url)"
 								tooltipPosition="top">

package/theme/layout/app/favorite-pages/favorite-pages-sidebar.component.ts

@@ -13,6 +13,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { Subject, switchMap } from 'rxjs';
 
+import { NavLinkDirective } from 'aril/boot/config/apps';
 import { ButtonComponent } from 'aril/ui/button';
 
 import { LayoutService } from '../../service/app.layout.service';
@@ -34,7 +35,8 @@ import { solidIcons } from 'aril/util/lib';
 		ButtonComponent,
 		TranslocoModule,
 		TooltipModule,
-		FontAwesomeModule
+		FontAwesomeModule,
+		NavLinkDirective
 	],
 	templateUrl: './favorite-pages-sidebar.component.html',
 	styleUrls: ['./favorite-pages-sidebar.component.scss'],

package/theme/layout/app/general-search/general-search.component.html

@@ -29,7 +29,8 @@
 					</div>
 				</ng-template>
 				<ng-template let-result pTemplate="item">
-					<div class="flex items-center gap-2">
+					<div class="flex items-center gap-2"
+						[arilNavLink]="result.url ? { tabId: '', navLink: result.url, navName: result.title } : null">
 						<div class="result-icon">
 							<i class="pi {{ result.icon }}"></i>
 						</div>

package/theme/layout/app/general-search/general-search.component.ts

@@ -11,7 +11,7 @@ import { of, startWith, Subject } from 'rxjs';
 import { catchError, filter, map, switchMap } from 'rxjs/operators';
 
 import { bridge } from 'aril/boot/bridge';
-import { Apps } from 'aril/boot/config/apps';
+import { Apps, NavLinkDirective } from 'aril/boot/config/apps';
 
 import { SearchService } from '../../service/search.service';
 import { getPresentableData } from './helpers';
@@ -20,7 +20,7 @@ import { CacheSearchRequestDTO, DefaultSearchAggregateAssetAggregate, Presentabl
 @Component({
 	selector: 'app-general-search',
 	standalone: true,
-	imports: [CommonModule, FormsModule, TranslocoModule, AutoCompleteModule],
+	imports: [CommonModule, FormsModule, TranslocoModule, AutoCompleteModule, NavLinkDirective],
 	templateUrl: './general-search.component.html',
 	styleUrls: ['./general-search.component.scss']
 })

package/theme/layout/app/history/history-sidebar.component.html

@@ -41,7 +41,9 @@
 				<p-scrollPanel [style]="{ width: '100%', height: '100%' }">
 					<div class="history-items">
 						@for (item of filteredHistory(); track trackByItemId($index, item)) {
-							<div class="history-item" (click)="navigateToItem(item)">
+							<div class="history-item"
+								[arilNavLink]="{ tabId: '', navLink: item.url, navName: getLocalizedTitle(item) }"
+								(click)="navigateToItem(item)">
 								<div class="item-content">
 									<div class="item-header">
 										<div class="item-title">

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

@@ -13,6 +13,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { Subject, takeUntil } from 'rxjs';
 
+import { NavLinkDirective } from 'aril/boot/config/apps';
 import { ButtonComponent } from 'aril/ui/button';
 import { TextComponent } from 'aril/ui/text';
 
@@ -36,7 +37,8 @@ import { solidIcons } from 'aril/util/lib';
 		BadgeModule,
 		TranslocoModule,
 		TextComponent,
-		FontAwesomeModule
+		FontAwesomeModule,
+		NavLinkDirective
 	],
 	templateUrl: './history-sidebar.component.html',
 	styleUrls: ['./history-sidebar.component.scss'],

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

@@ -1,24 +1,124 @@
-import { OnDestroy, Renderer2 } from '@angular/core';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { AfterViewInit, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
 import { Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { ContextMenu } from 'primeng/contextmenu';
 import { Subscription } from 'rxjs';
+import { NavItem, NavService } from 'aril/boot/config/apps';
+import { TranslateJsonPipe } from 'aril/util/pipes';
 import { LayoutService } from '../../service/app.layout.service';
 import { AppMenuService } from '../../service/app.menu.service';
-import { AppTopbarComponent } from '../topbar/app.topbar.component';
 import { ExpandableMenuComponent } from '../expandableMenu/expandable-menu.component';
 import { StaticSidebarComponent } from '../static-sidebar/static-sidebar.component';
+import { AppTopbarComponent } from '../topbar/app.topbar.component';
 import * as i0 from "@angular/core";
-export declare class AppLayoutComponent implements OnDestroy {
-    private menuService;
+export declare class AppLayoutComponent implements OnDestroy, AfterViewInit {
+    private readonly menuService;
     layoutService: LayoutService;
     renderer: Renderer2;
     router: Router;
+    private readonly translateJsonPipe;
     overlayMenuOpenSubscription: Subscription;
     menuOutsideClickListener: any;
     menuScrollListener: any;
     expandableMenuComponent: ExpandableMenuComponent;
     staticSidebarComponent: StaticSidebarComponent;
     appTopbar: AppTopbarComponent;
-    constructor(menuService: AppMenuService, layoutService: LayoutService, renderer: Renderer2, router: Router);
+    tabsContainer?: ElementRef<HTMLDivElement>;
+    tabContextMenu?: ContextMenu;
+    navLinkContextMenu?: ContextMenu;
+    navService: NavService;
+    private readonly translocoService;
+    private readonly navLinkContextMenuService;
+    private readonly tabSession;
+    tabContextMenuItems: MenuItem[];
+    /** Tab bar yatay scroll konum/genişlik durumu. Chevron butonlarının görünürlüğünü kontrol eder. */
+    canScrollLeft: import("@angular/core").WritableSignal<boolean>;
+    canScrollRight: import("@angular/core").WritableSignal<boolean>;
+    /**
+     * Breadcrumb segmentleri — `bridge.breadcrumbs()` üzerinden okunur.
+     * Source-of-truth aktif MFE'de çalışan `BreadcrumbPublisherService`'tir;
+     * MFE her NavigationEnd'de kendi route ağacından zinciri çıkarıp bridge'e yazar.
+     * Shell yalnızca presenter — başa "Anasayfa" item'ı ekleyip son item'ı aktif işaretler.
+     */
+    breadcrumbItems: import("@angular/core").Signal<(MenuItem & {
+        active?: boolean | undefined;
+        isHome?: boolean | undefined;
+    })[]>;
+    /**
+     * Aktif olmayan breadcrumb segmentine tıklama → mevcut tab'ı parent route ile günceller.
+     * `<a [routerLink]>` directive'i `href`'i Router'ın location strategy'sine göre
+     * (hash/path) doğru formatlar — sağ tık "linki kopyala" davranışı çalışır.
+     * Default Router navigate'ini `preventDefault()` ile durdurup `navigateInCurrentTab`
+     * üzerinden ilerletiyoruz; böylece yeni sekme açılmaz.
+     */
+    onBreadcrumbClick(event: MouseEvent, item: {
+        label?: string;
+        url?: string;
+    }): void;
+    /**
+     * Home icon → root menu item (`apps.service.ts:51`'de tanımlı `{ root: true, routerLink: '/' }`).
+     * Tek source-of-truth — etiket çevirisi `TranslateJsonPipe` ile aktif dilden okunur.
+     * Mevcut tab güncellenir, yeni sekme açılmaz.
+     */
+    onHomeClick(event: MouseEvent): void;
+    /**
+     * Anasayfa için NavItem — breadcrumb home ikonunun hem `(click)` handler'ı hem
+     * `[arilNavLink]` context menu directive'i tarafından paylaşılır.
+     */
+    readonly homeNavItem: import("@angular/core").Signal<NavItem>;
+    /**
+     * Tab icon resolution sırası:
+     *   1. NavItem.icon (sidebar click'inden iletilmişse — en doğru)
+     *   2. Menu config'inde navLink'i en uzun prefix olarak match eden item.icon
+     *   3. Generic fallback (`pi pi-file`)
+     *
+     * Best-match için longest-prefix kullanılır: `wdm/meters/123` için hem `wdm` hem
+     * `wdm/meters` match'lerse, daha spesifik `wdm/meters` kazanır. Böylece deep link
+     * refresh'inde (NavService.firstCheckForRoute path'inde icon set edilemediği zaman)
+     * doğru remote/section ikonu otomatik bulunur.
+     */
+    getTabIcon(item: NavItem): string;
+    private findIconForRoute;
+    drop(event: CdkDragDrop<any[]>): void;
+    isActive(item: NavItem): boolean;
+    closeTab(event: Event, item: NavItem): void;
+    /** Tab sol-click → o tab'a geç. NavService Router'a `?_tab` URL'i ve history state'i verir. */
+    onTabClick(event: MouseEvent, item: NavItem): void;
+    /** Middle click (button 1) → tab kapat (Chrome standardı). Sabit tab'lar kapatılmaz. */
+    onTabAuxClick(event: MouseEvent, item: NavItem): void;
+    /** Middle click default scroll davranışını engelle. */
+    onTabMousedown(event: MouseEvent): void;
+    /**
+     * Tab right-click → context menu. Sabit tab'larda "Kapat" disabled; pin/unpin item'ı
+     * Chrome'daki gibi en üstte yer alır. `closeOthers`/`closeToRight`/`closeAll` zaten
+     * NavService seviyesinde pinned'i koruyor — UI'da ekstra disabled gerekmez.
+     */
+    onTabContextMenu(event: MouseEvent, item: NavItem): void;
+    private isLastTab;
+    /**
+     * Tek kalan tab anasayfaysa true → kapatma (✕) butonu gizlenir (NavService de kapatmayı
+     * reddeder). "Her zaman en az 1 tab açık" kuralının UI tarafı.
+     */
+    isLastHomeTab(item: NavItem): boolean;
+    /** "+" butonu → ana sayfaya navigate (yeni tab varsa onu aç, yoksa eklenir). */
+    onAddTab(): void;
+    scrollTabsLeft(): void;
+    scrollTabsRight(): void;
+    private updateScrollState;
+    /**
+     * Klavye kısayolları (Chrome paritesi):
+     * - `Alt+W` → aktif tab kapat (Ctrl+W browser-reserved)
+     * - `Ctrl+Tab` / `Ctrl+Shift+Tab` → sonraki/önceki tab (denemeli — bazı tarayıcılar override etmez)
+     * - `Ctrl+PageDown` / `Ctrl+PageUp` → sonraki/önceki tab (yedek)
+     * - `Alt+1..9` → ilgili index'teki tab (Ctrl+1..9 browser-reserved)
+     * - `Ctrl+Shift+T` veya `Alt+Shift+T` → son kapatılan tab'ı geri aç
+     */
+    onDocumentKeydown(event: KeyboardEvent): void;
+    private isTypingInInput;
+    ngAfterViewInit(): void;
+    private resizeObserver;
+    constructor(menuService: AppMenuService, layoutService: LayoutService, renderer: Renderer2, router: Router, translateJsonPipe: TranslateJsonPipe);
     blockBodyScroll(): void;
     unblockBodyScroll(): void;
     private isElementInside;

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

@@ -7,7 +7,108 @@
 	<div class="layout-content-wrapper">
 		<app-topbar />
 		<div class="layout-content">
-			<router-outlet />
+			<p-breadcrumb styleClass="breadcrumb-strip" [model]="breadcrumbItems()">
+				<ng-template pTemplate="item" let-item>
+					@if (item.isHome) {
+						<a class="breadcrumb-home"
+							[routerLink]="'/'"
+							[arilNavLink]="homeNavItem()"
+							(click)="onHomeClick($event)"
+							[attr.aria-label]="'breadcrumb.home' | transloco">
+							<i class="pi pi-home" aria-hidden="true"></i>
+						</a>
+					} @else if (item.active || !item.url) {
+						<span class="breadcrumb-item active">{{ item.label }}</span>
+					} @else {
+						<a
+							class="breadcrumb-item breadcrumb-link"
+							[routerLink]="item.url"
+							[arilNavLink]="{ tabId: '', navLink: item.url, navName: item.label }"
+							(click)="onBreadcrumbClick($event, item)">
+							{{ item.label }}
+						</a>
+					}
+				</ng-template>
+				<ng-template pTemplate="separator">
+					<i class="breadcrumb-sep pi pi-angle-right text-base" aria-hidden="true"></i>
+				</ng-template>
+			</p-breadcrumb>
+			<div class="tabs-bar">
+				@if (canScrollLeft()) {
+					<button
+						type="button"
+						class="tabs-scroll-btn tabs-scroll-left"
+						(click)="scrollTabsLeft()"
+						[pTooltip]="'tab.scrollLeft' | transloco"
+						tooltipPosition="bottom"
+						[attr.aria-label]="'tab.scrollLeft' | transloco">
+						<i class="pi pi-chevron-left"></i>
+					</button>
+				}
+				<div
+					#tabsContainer
+					class="tabs-container"
+					cdkDropList
+					cdkDropListOrientation="horizontal"
+					(cdkDropListDropped)="drop($event)">
+					@for (item of navService.activeRoutes(); track item.tabId; let i = $index) {
+						<div
+							class="tab-item"
+							cdkDrag
+							[class.active]="isActive(item)"
+							[class.pinned]="item.pinned"
+							[pTooltip]="item.navName"
+							tooltipPosition="bottom"
+							[tooltipDisabled]="isActive(item) && !item.pinned"
+							[showDelay]="500"
+							(click)="onTabClick($event, item)"
+							(auxclick)="onTabAuxClick($event, item)"
+							(mousedown)="onTabMousedown($event)"
+							(contextmenu)="onTabContextMenu($event, item)">
+							<i class="tab-icon" [ngClass]="getTabIcon(item)"></i>
+							@if (!item.pinned) {
+								<span class="tab-title">{{ item.navName }}</span>
+								@if (!isLastHomeTab(item)) {
+									<button
+										type="button"
+										class="tab-close-btn"
+										(click)="closeTab($event, item)"
+										[attr.aria-label]="'tab.close' | transloco">
+										<i class="pi pi-times"></i>
+									</button>
+								}
+							}
+						</div>
+					}
+				</div>
+				@if (canScrollRight()) {
+					<button
+						type="button"
+						class="tabs-scroll-btn tabs-scroll-right"
+						(click)="scrollTabsRight()"
+						[pTooltip]="'tab.scrollRight' | transloco"
+						tooltipPosition="bottom"
+						[attr.aria-label]="'tab.scrollRight' | transloco">
+						<i class="pi pi-chevron-right"></i>
+					</button>
+				}
+				<button
+					type="button"
+					class="tabs-add-btn"
+					(click)="onAddTab()"
+					[pTooltip]="'tab.newTab' | transloco"
+					tooltipPosition="bottom"
+					[attr.aria-label]="'tab.newTab' | transloco">
+					<i class="pi pi-plus"></i>
+				</button>
+			</div>
+			<p-contextMenu #tabContextMenu [model]="tabContextMenuItems" appendTo="body"></p-contextMenu>
+			<!-- Global nav-link context menu: tüm linkli yapılarda `[arilNavLink]` directive'i bu instance'ı paylaşır. -->
+			<p-contextMenu #navLinkContextMenu [model]="[]" appendTo="body"></p-contextMenu>
+
+			<div class="layout-page">
+				<router-outlet />
+			</div>
 		</div>
 	</div>
 	<app-profilemenu />