aril 1.0.39 → 1.0.40

package/theme/layout/app/site-map/site-map-sidebar.component.html

@@ -0,0 +1,118 @@
+<p-sidebar
+	[(visible)]="visible"
+	position="right"
+	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
+	styleClass="layout-sitemap-sidebar w-full sm:w-30rem"
+	*transloco="let t; read: 'siteMap'">
+	<ng-template pTemplate="header">
+		<div class="flex align-items-center justify-content-between gap-2 w-full">
+			<div class="flex align-items-center gap-2">
+				<i class="pi pi-sitemap text-primary text-xl"></i>
+				<span class="font-bold text-lg">{{ t('siteMap') }}</span>
+				<span class="total-pages">{{ totalPages() }} {{ t('pages') }}</span>
+			</div>
+		</div>
+	</ng-template>
+
+	<div class="sitemap-content">
+		<div class="search-section">
+			<aril-text [placeholder]="t('searchPages')" [(ngModel)]="searchTerm" (ngModelChange)="onSearchChange()">
+			</aril-text>
+		</div>
+
+		@if (filteredNodes().length > 0) {
+			<div class="quick-actions">
+				<aril-button
+					icon="PLUS"
+					color="primary"
+					[raised]="true"
+					size="sm"
+					[pTooltip]="t('expandAll')"
+					tooltipPosition="top"
+					(clickEvent)="expandAll()">
+				</aril-button>
+				<aril-button
+					icon="MINUS"
+					color="danger"
+					[raised]="false"
+					size="sm"
+					[pTooltip]="t('collapseAll')"
+					tooltipPosition="top"
+					(clickEvent)="collapseAll()">
+				</aril-button>
+			</div>
+		}
+
+		<!-- Site Map Tree -->
+		@if (filteredNodes().length > 0) {
+			<div class="sitemap-tree">
+				<p-scrollPanel [style]="{ width: '100%', height: '100%' }">
+					<div class="tree-container">
+						@for (node of filteredNodes(); track trackByKey($index, node)) {
+							<ng-container *ngTemplateOutlet="treeNodeTemplate; context: { $implicit: node, level: 0 }"></ng-container>
+						}
+					</div>
+				</p-scrollPanel>
+			</div>
+		} @else {
+			<div class="empty-state">
+				<div class="empty-content">
+					<i class="pi pi-sitemap empty-icon"></i>
+					<h3 class="empty-title">
+						{{ searchTerm() ? t('noSearchResults') : t('noPages') }}
+					</h3>
+					<p class="empty-message">
+						{{ searchTerm() ? t('tryDifferentKeywords') : '' }}
+					</p>
+					@if (searchTerm()) {
+						<aril-button
+							[label]="t('clearSearch')"
+							icon="TIMES"
+							color="secondary"
+							[outlined]="true"
+							size="sm"
+							(clickEvent)="searchTerm.set(''); onSearchChange()">
+						</aril-button>
+					}
+				</div>
+			</div>
+		}
+
+		<!-- Recursive Tree Node Template -->
+		<ng-template #treeNodeTemplate let-node let-level="level">
+			<div class="tree-node" [style.margin-left.px]="level * 20">
+				<div
+					class="node-item"
+					[class.has-children]="node.children && node.children.length > 0"
+					[class.is-page]="node.routerLink"
+					[routerLink]="node.routerLink"
+					(click)="!node.routerLink ? toggleNode(node) : (visible = false)">
+					<div class="node-content">
+						@if (node.children && node.children.length > 0) {
+							<div class="toggle-btn" (click)="$event.stopPropagation(); toggleNode(node)">
+								<i class="pi" [class.pi-chevron-right]="!node.expanded" [class.pi-chevron-down]="node.expanded"></i>
+							</div>
+						}
+
+						@if (node.icon) {
+							<i class="node-icon" [class]="node.icon"></i>
+						}
+						<span class="node-label">{{ node.label | translateJson }}</span>
+
+						@if (node.routerLink) {
+							<i class="external-icon pi pi-external-link"></i>
+						}
+					</div>
+				</div>
+
+				<!-- Recursive Children -->
+				@if (node.children && node.expanded) {
+					@for (child of node.children; track trackByKey($index, child)) {
+						<ng-container
+							*ngTemplateOutlet="treeNodeTemplate; context: { $implicit: child, level: level + 1 }"></ng-container>
+					}
+				}
+			</div>
+		</ng-template>
+	</div>
+</p-sidebar>

package/theme/layout/app/site-map/site-map-sidebar.component.scss

@@ -0,0 +1,189 @@
+:host ::ng-deep {
+	.layout-sitemap-sidebar {
+		.p-sidebar-content {
+			padding: 0;
+			background: var(--surface-ground);
+		}
+
+		.p-sidebar-header {
+			background: var(--primary-color);
+			color: var(--primary-color-text);
+			border-bottom: 1px solid var(--primary-600);
+			padding: 1rem 0.5rem;
+
+			span {
+				font-size: 1.1rem;
+				font-weight: 600;
+			}
+
+			.total-pages {
+				background: rgba(255, 255, 255, 0.2);
+				color: rgba(255, 255, 255, 0.9);
+				padding: 0.25rem 0.5rem;
+				border-radius: 12px;
+				font-size: 0.75rem;
+				font-weight: 500;
+			}
+		}
+	}
+}
+
+.sitemap-content {
+	display: flex;
+	flex-direction: column;
+	height: 90vh;
+	background: var(--surface-ground);
+}
+
+.search-section {
+	padding: 1rem;
+	border-bottom: 1px solid var(--surface-border);
+	background: var(--surface-0);
+}
+
+.quick-actions {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+	gap: 0.5rem;
+	padding: 0.75rem 1rem;
+	border-bottom: 1px solid var(--surface-border);
+	background: var(--surface-0);
+}
+
+.sitemap-tree {
+	flex: 1;
+	overflow: hidden;
+}
+
+.tree-container {
+	padding: 0.5rem 0;
+}
+
+.tree-node {
+	.node-item {
+		display: flex;
+		align-items: center;
+		padding: 0.5rem 1rem;
+		border-radius: 6px;
+		margin: 0.1rem 0.5rem;
+		cursor: pointer;
+		transition: all 0.2s ease;
+		border: 1px solid transparent;
+
+		&:hover {
+			background: var(--surface-hover);
+			border-color: var(--surface-border);
+		}
+
+		&.is-page {
+			&:hover {
+				background: var(--primary-50);
+				border-color: var(--primary-200);
+
+				.external-icon {
+					opacity: 1;
+				}
+			}
+		}
+
+		&.has-children {
+			font-weight: 500;
+		}
+	}
+
+	.node-content {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		width: 100%;
+		min-width: 0;
+	}
+
+	.toggle-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 20px;
+		height: 20px;
+		background: transparent;
+		border: none;
+		border-radius: 4px;
+		color: var(--text-color-secondary);
+		cursor: pointer;
+		transition: all 0.2s ease;
+		flex-shrink: 0;
+
+		&:hover {
+			background: var(--surface-hover);
+			color: var(--primary-color);
+		}
+
+		i {
+			font-size: 0.7rem;
+		}
+	}
+
+	.node-icon {
+		color: var(--primary-color);
+		font-size: 0.9rem;
+		flex-shrink: 0;
+	}
+
+	.node-label {
+		flex: 1;
+		font-size: 0.9rem;
+		color: var(--text-color);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.external-icon {
+		color: var(--text-color-secondary);
+		font-size: 0.7rem;
+		opacity: 0.6;
+		transition: opacity 0.2s ease;
+		flex-shrink: 0;
+	}
+}
+
+.empty-state {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 2rem;
+}
+
+.empty-content {
+	text-align: center;
+	max-width: 300px;
+}
+
+.empty-icon {
+	font-size: 3rem;
+	color: var(--text-color-secondary);
+	margin-bottom: 1rem;
+	opacity: 0.5;
+}
+
+.empty-message {
+	font-size: 0.9rem;
+	color: var(--text-color-secondary);
+	line-height: 1.4;
+	margin-bottom: 1.5rem;
+}
+
+// Custom Scrollbar
+:host ::ng-deep {
+	.p-scrollpanel-bar-y {
+		background: var(--primary-200);
+		width: 4px;
+		border-radius: 2px;
+	}
+
+	.p-scrollpanel-bar-y:hover {
+		background: var(--primary-300);
+	}
+}

package/theme/layout/app/site-map/site-map-sidebar.component.ts

@@ -0,0 +1,189 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import { SidebarModule } from 'primeng/sidebar';
+import { TooltipModule } from 'primeng/tooltip';
+
+import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+
+import { ButtonComponent } from 'aril/ui/button';
+import { TextComponent } from 'aril/ui/text';
+import { TranslateJsonPipe } from 'aril/util/pipes';
+
+import { LayoutService } from '../../service/app.layout.service';
+
+interface MenuNode {
+	key: string;
+	label: string | object;
+	icon?: string;
+	routerLink?: string;
+	children?: MenuNode[];
+	expanded?: boolean;
+}
+
+@Component({
+	standalone: true,
+	selector: 'app-site-map-sidebar',
+	imports: [
+		CommonModule,
+		FormsModule,
+		RouterModule,
+		SidebarModule,
+		ScrollPanelModule,
+		TooltipModule,
+		ButtonComponent,
+		TextComponent,
+		TranslocoModule,
+		TranslateJsonPipe
+	],
+	templateUrl: './site-map-sidebar.component.html',
+	styleUrls: ['./site-map-sidebar.component.scss']
+})
+export class SiteMapSidebarComponent implements OnInit {
+	siteMapNodes = signal<MenuNode[]>([]);
+	filteredNodes = signal<MenuNode[]>([]);
+	searchTerm = signal<string>('');
+	totalPages = signal<number>(0);
+
+	constructor(
+		public layoutService: LayoutService,
+		private translocoService: TranslocoService
+	) {}
+
+	ngOnInit(): void {
+		this.loadSiteMap();
+	}
+
+	get visible(): boolean {
+		return this.layoutService.state.siteMapSidebarVisible;
+	}
+
+	set visible(value: boolean) {
+		this.layoutService.state.siteMapSidebarVisible = value;
+	}
+
+	private loadSiteMap(): void {
+		const menuItems = (<any>globalThis).hostMenuItems?.() || [];
+		const nodes = this.buildSiteMapNodes(menuItems);
+		const totalCount = this.countTotalPages(nodes);
+
+		this.siteMapNodes.set(nodes);
+		this.filteredNodes.set(nodes);
+		this.totalPages.set(totalCount);
+	}
+
+	private buildSiteMapNodes(items: any[], parentKey = ''): MenuNode[] {
+		return items
+			.filter((item) => {
+				// Keep the home page route ("/") and any non-empty routes
+				return !item.routerLink || item.routerLink === '/' || item.routerLink.trim() !== '';
+			})
+			.map((item, index) => {
+				const key = parentKey ? `${parentKey}-${index}` : `${index}`;
+
+				let label: string | object;
+				if (item.routerLink === '/') {
+					label = { tr: 'Anasayfa', en: 'Home' };
+				} else {
+					label = item.label || { tr: 'Bilinmeyen', en: 'Unknown' };
+				}
+
+				const node: MenuNode = {
+					key,
+					label,
+					icon: item.icon,
+					routerLink: item.routerLink,
+					expanded: false
+				};
+
+				if (item.items && item.items.length > 0) {
+					node.children = this.buildSiteMapNodes(item.items, key);
+				}
+
+				return node;
+			});
+	}
+
+	private countTotalPages(nodes: MenuNode[]): number {
+		let count = 0;
+		for (const node of nodes) {
+			if (node.routerLink) {
+				count++;
+			}
+			if (node.children) {
+				count += this.countTotalPages(node.children);
+			}
+		}
+		return count;
+	}
+
+	onSearchChange(): void {
+		const searchTerm = this.searchTerm().toLowerCase().trim();
+		if (!searchTerm) {
+			this.filteredNodes.set(this.siteMapNodes());
+		} else {
+			const filtered = this.filterNodes(this.siteMapNodes(), searchTerm);
+			this.filteredNodes.set(filtered);
+		}
+	}
+
+	private filterNodes(nodes: MenuNode[], searchTerm: string): MenuNode[] {
+		const filtered: MenuNode[] = [];
+		const currentLang = this.translocoService.getActiveLang();
+
+		for (const node of nodes) {
+			// Convert label to string for search based on active language
+			const labelText =
+				typeof node.label === 'string' ?
+					node.label
+				:	(node.label as any)?.[currentLang] || (node.label as any)?.tr || (node.label as any)?.en || '';
+
+			const matches = labelText.toLowerCase().includes(searchTerm);
+			let filteredChildren: MenuNode[] = [];
+
+			if (node.children) {
+				filteredChildren = this.filterNodes(node.children, searchTerm);
+			}
+
+			if (matches || filteredChildren.length > 0) {
+				filtered.push({
+					...node,
+					children: filteredChildren.length > 0 ? filteredChildren : node.children,
+					expanded: filteredChildren.length > 0
+				});
+			}
+		}
+
+		return filtered;
+	}
+
+	expandAll(): void {
+		const expanded = this.expandNodes(this.filteredNodes(), true);
+		this.filteredNodes.set([...expanded]);
+	}
+
+	collapseAll(): void {
+		const collapsed = this.expandNodes(this.filteredNodes(), false);
+		this.filteredNodes.set([...collapsed]);
+	}
+
+	private expandNodes(nodes: MenuNode[], expanded: boolean): MenuNode[] {
+		return nodes.map((node) => ({
+			...node,
+			expanded,
+			children: node.children ? this.expandNodes(node.children, expanded) : undefined
+		}));
+	}
+
+	toggleNode(node: MenuNode): void {
+		node.expanded = !node.expanded;
+		this.filteredNodes.set([...this.filteredNodes()]);
+	}
+
+	trackByKey(index: number, node: MenuNode): string {
+		return node.key || `${index}`;
+	}
+}

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

@@ -1,10 +1,10 @@
 import { ElementRef } from '@angular/core';
 import { TranslocoService } from '@ngneat/transloco';
+import { KeycloakService } from 'keycloak-angular';
 import { PubSubService } from 'aril/util/pub-sub';
 import { LayoutService } from '../../service/app.layout.service';
 import { LanguageCode } from '../../service/interfaces/enum';
 import { Language } from '../../service/interfaces/interfaces';
-import { KeycloakService } from 'keycloak-angular';
 import * as i0 from "@angular/core";
 export declare class AppTopbarComponent {
     private readonly translocoService;
@@ -15,12 +15,18 @@ export declare class AppTopbarComponent {
     layoutService: LayoutService;
     search: string;
     filePath: import("@angular/core").WritableSignal<string>;
+    isNotificationsVisible: import("@angular/core").WritableSignal<boolean>;
     currentLang: LanguageCode;
     languages: Language[];
     constructor(translocoService: TranslocoService, pubSubService: PubSubService, keycloak: KeycloakService);
     onMenuButtonClick(): void;
     onProfileButtonClick(): void;
     onConfigButtonClick(): void;
+    onHistoryButtonClick(): void;
+    onSiteMapButtonClick(): void;
+    onFavoritePagesButtonClick(): void;
+    onNotificationsButtonClick(): void;
+    onNotificationsClose(): void;
     onLanguageChange(): void;
     private publishLanguageChange;
     getFlagPath(lang: LanguageCode): string;

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

@@ -3,46 +3,66 @@
 		<button #menubutton type="button" class="topbar-menubutton p-link p-trigger" (click)="onMenuButtonClick()">
 			<i class="pi pi-bars"></i>
 		</button>
-		<img [src]="filePath()" class="mr-3" alt="yeap" />
+		<img [src]="filePath()" class="topbar-logo mr-3" alt="logo" />
 	</div>
 
-	<div class="topbar-search" style="width: 50rem">
-		<span class="p-input-icon-left" style="width: 100%">
+	<div class="topbar-search" *transloco="let t; read: ''">
+		<span class="p-input-icon-left">
 			<i class="pi pi-search"></i>
 			<input
 				type="text"
 				pInputText
 				variant="filled"
-				placeholder="Genel Arama"
+				[placeholder]="t('searchGeneral')"
 				style="background: #eff3f8; border: none; height: 42px"
-				class="p-inputtext p-component p-element sm:w-full" />
+				class="p-inputtext p-component p-element topbar-search-input" />
 		</span>
 	</div>
 
 	<div class="topbar-end mr-2">
 		<ul class="topbar-menu">
-			<li>
-				<p-button icon="pi pi-sitemap" severity="secondary" [text]="true" [rounded]="true" />
+			<li class="topbar-menu-item">
+				<p-button
+					icon="pi pi-sitemap"
+					severity="secondary"
+					[text]="true"
+					[rounded]="true"
+					(click)="onSiteMapButtonClick()" />
 			</li>
-			<li>
-				<p-button icon="pi pi-history" severity="secondary" [text]="true" [rounded]="true" />
+			<li class="topbar-menu-item">
+				<p-button
+					icon="pi pi-history"
+					severity="secondary"
+					[text]="true"
+					[rounded]="true"
+					(click)="onHistoryButtonClick()" />
 			</li>
-			<li>
-				<p-button icon="pi pi-heart" severity="secondary" [text]="true" [rounded]="true" />
+			<li class="topbar-menu-item">
+				<p-button
+					icon="pi pi-heart"
+					severity="secondary"
+					[text]="true"
+					[rounded]="true"
+					(click)="onFavoritePagesButtonClick()" />
 			</li>
 
-			<li>
+			<li class="topbar-menu-item">
 				<p-button severity="secondary" [text]="true" [rounded]="true" (click)="onProfileButtonClick()">
 					{{ username[0] | uppercase }}
 				</p-button>
 			</li>
-			<li>
+			<li class="topbar-menu-item">
 				<p-divider layout="vertical" styleClass="h-1rem border-500 m-0" />
 			</li>
-			<li>
-				<i class="pi pi-bell" severity="info" pBadge [value]="0"></i>
+			<li class="topbar-menu-item">
+				<i
+					class="pi pi-bell notification-icon"
+					severity="info"
+					pBadge
+					[value]="0"
+					(click)="onNotificationsButtonClick()"></i>
 			</li>
-			<li>
+			<li class="topbar-menu-item">
 				<p-dropdown
 					[options]="languages"
 					[(ngModel)]="currentLang"
@@ -54,7 +74,7 @@
 					<ng-template pTemplate="selectedItem">
 						<div class="flex align-items-center gap-2">
 							<img [src]="getFlagPath(currentLang)" class="flag-icon" alt="flag" />
-							<span>{{ currentLang | uppercase }}</span>
+							<span class="language-text">{{ currentLang | uppercase }}</span>
 						</div>
 					</ng-template>
 					<ng-template pTemplate="item" let-item>