aril 0.0.26 → 0.0.28

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

@@ -1,152 +1,151 @@
-<p-sidebar
-	[(visible)]="visible"
-	position="right"
-	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
-	styleClass="layout-profile-sidebar w-full sm:w-25rem">
-	<div class="flex flex-column mx-auto md:mx-0">
-		<span class="mb-2 font-semibold">Welcome</span>
-		<span class="text-color-secondary font-medium mb-5">Isabella Andolini</span>
-
-		<ul class="list-none m-0 p-0">
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-user text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Profile</span>
-						<p class="text-color-secondary m-0">Lorem ipsum date visale</p>
-					</div>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-user text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Billing</span>
-						<p class="text-color-secondary m-0">Amet mimin mıollit</p>
-					</div>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-cog text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Settings</span>
-						<p class="text-color-secondary m-0">Exercitation veniam</p>
-					</div>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-power-off text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Sign Out</span>
-						<p class="text-color-secondary m-0">Sed ut perspiciatis</p>
-					</div>
-				</a>
-			</li>
-		</ul>
-	</div>
-
-	<div class="flex flex-column mt-5 mx-auto md:mx-0">
-		<span class="mb-2 font-semibold">Notifications</span>
-		<span class="text-color-secondary font-medium mb-5">You have 3 notifications</span>
-
-		<ul class="list-none m-0 p-0">
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-comment text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Your post has new comments</span>
-						<p class="text-color-secondary m-0">5 min ago</p>
-					</div>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-trash text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Your post has been deleted</span>
-						<p class="text-color-secondary m-0">15min ago</p>
-					</div>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<i class="pi pi-folder text-xl text-primary"></i>
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Post has been updated</span>
-						<p class="text-color-secondary m-0">3h ago</p>
-					</div>
-				</a>
-			</li>
-		</ul>
-	</div>
-
-	<div class="flex flex-column mt-5 mx-auto md:mx-0">
-		<span class="mb-2 font-semibold">Messages</span>
-		<span class="text-color-secondary font-medium mb-5">You have new messages</span>
-
-		<ul class="list-none m-0 p-0">
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<img src="assets/demo/images/avatar/circle/avatar-m-8.png" alt="Avatar" class="w-2rem h-2rem" />
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">James Robinson</span>
-						<p class="text-color-secondary m-0">10 min ago</p>
-					</div>
-					<p-tag value="3" class="ml-auto"></p-tag>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<img src="assets/demo/images/avatar/circle/avatar-f-8.png" alt="Avatar" class="w-2rem h-2rem" />
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Mary Watson</span>
-						<p class="text-color-secondary m-0">15min ago</p>
-					</div>
-					<p-tag value="1" class="ml-auto"></p-tag>
-				</a>
-			</li>
-			<li>
-				<a
-					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
-					<span>
-						<img src="assets/demo/images/avatar/circle/avatar-f-4.png" alt="Avatar" class="w-2rem h-2rem" />
-					</span>
-					<div class="ml-3">
-						<span class="mb-2 font-semibold">Aisha Webb</span>
-						<p class="text-color-secondary m-0">3h ago</p>
-					</div>
-					<p-tag value="2" class="ml-auto"></p-tag>
-				</a>
-			</li>
-		</ul>
-	</div>
-</p-sidebar>
+<p-sidebar
+	[(visible)]="visible"
+	position="right"
+	[transitionOptions]="'.3s cubic-bezier(0, 0, 0.2, 1)'"
+	styleClass="layout-profile-sidebar w-full sm:w-25rem">
+	<div class="flex flex-column mx-auto md:mx-0">
+		<span class="mb-2 font-semibold">Hoşgeldiniz</span>
+		<span class="text-color-secondary font-medium mb-5">{{username}}</span>
+
+		<ul class="list-none m-0 p-0">
+			<!-- <li>
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<i class="pi pi-user text-xl text-primary"></i>
+					</span>
+					<div class="ml-3">
+						<span class="mb-2 font-semibold">Profile</span>
+						<p class="text-color-secondary m-0">Lorem ipsum date visale</p>
+					</div>
+				</a>
+			</li>
+			<li>
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<i class="pi pi-user text-xl text-primary"></i>
+					</span>
+					<div class="ml-3">
+						<span class="mb-2 font-semibold">Billing</span>
+						<p class="text-color-secondary m-0">Amet mimin mıollit</p>
+					</div>
+				</a>
+			</li>
+			<li>
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<i class="pi pi-cog text-xl text-primary"></i>
+					</span>
+					<div class="ml-3">
+						<span class="mb-2 font-semibold">Settings</span>
+						<p class="text-color-secondary m-0">Exercitation veniam</p>
+					</div>
+				</a>
+			</li> -->
+			<li (click)="keyCloakManager.logout()">
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<i class="pi pi-power-off text-xl text-primary"></i>
+					</span>
+					<div class="ml-3" >
+						<span class="mb-2 font-semibold">Çıkış</span>
+					</div>
+				</a>
+			</li>
+		</ul>
+	</div>
+
+	<!-- <div class="flex flex-column mt-5 mx-auto md:mx-0">
+		<span class="mb-2 font-semibold">Notifications</span>
+		<span class="text-color-secondary font-medium mb-5">You have 3 notifications</span>
+
+		<ul class="list-none m-0 p-0">
+			<li>
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<i class="pi pi-comment text-xl text-primary"></i>
+					</span>
+					<div class="ml-3">
+						<span class="mb-2 font-semibold">Your post has new comments</span>
+						<p class="text-color-secondary m-0">5 min ago</p>
+					</div>
+				</a>
+			</li>
+			<li>
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<i class="pi pi-trash text-xl text-primary"></i>
+					</span>
+					<div class="ml-3">
+						<span class="mb-2 font-semibold">Your post has been deleted</span>
+						<p class="text-color-secondary m-0">15min ago</p>
+					</div>
+				</a>
+			</li>
+			<li>
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<i class="pi pi-folder text-xl text-primary"></i>
+					</span>
+					<div class="ml-3">
+						<span class="mb-2 font-semibold">Post has been updated</span>
+						<p class="text-color-secondary m-0">3h ago</p>
+					</div>
+				</a>
+			</li>
+		</ul>
+	</div> -->
+
+	<!-- <div class="flex flex-column mt-5 mx-auto md:mx-0">
+		<span class="mb-2 font-semibold">Messages</span>
+		<span class="text-color-secondary font-medium mb-5">You have new messages</span>
+
+		<ul class="list-none m-0 p-0">
+			<li>
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<img src="assets/demo/images/avatar/circle/avatar-m-8.png" alt="Avatar" class="w-2rem h-2rem" />
+					</span>
+					<div class="ml-3">
+						<span class="mb-2 font-semibold">James Robinson</span>
+						<p class="text-color-secondary m-0">10 min ago</p>
+					</div>
+					<p-tag value="3" class="ml-auto"></p-tag>
+				</a>
+			</li>
+			<li>
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<img src="assets/demo/images/avatar/circle/avatar-f-8.png" alt="Avatar" class="w-2rem h-2rem" />
+					</span>
+					<div class="ml-3">
+						<span class="mb-2 font-semibold">Mary Watson</span>
+						<p class="text-color-secondary m-0">15min ago</p>
+					</div>
+					<p-tag value="1" class="ml-auto"></p-tag>
+				</a>
+			</li>
+			<li>
+				<a
+					class="cursor-pointer flex surface-border mb-3 p-3 align-items-center border-1 surface-border border-round hover:surface-hover transition-colors transition-duration-150">
+					<span>
+						<img src="assets/demo/images/avatar/circle/avatar-f-4.png" alt="Avatar" class="w-2rem h-2rem" />
+					</span>
+					<div class="ml-3">
+						<span class="mb-2 font-semibold">Aisha Webb</span>
+						<p class="text-color-secondary m-0">3h ago</p>
+					</div>
+					<p-tag value="2" class="ml-auto"></p-tag>
+				</a>
+			</li>
+		</ul>
+	</div> -->
+</p-sidebar>

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

@@ -1,24 +1,31 @@
-import { Component } from '@angular/core';
-
-import { SidebarModule } from 'primeng/sidebar';
-import { TagModule } from 'primeng/tag';
-
-import { LayoutService } from '../../service/app.layout.service';
-
-@Component({
-	standalone: true,
-	selector: 'app-profilemenu',
-	imports: [SidebarModule, TagModule],
-	templateUrl: './app.profilesidebar.component.html'
-})
-export class AppProfileSidebarComponent {
-	constructor(public layoutService: LayoutService) {}
-
-	get visible(): boolean {
-		return this.layoutService.state.profileSidebarVisible;
-	}
-
-	set visible(_val: boolean) {
-		this.layoutService.state.profileSidebarVisible = _val;
-	}
-}
+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';
+
+@Component({
+	standalone: true,
+	selector: 'app-profilemenu',
+	imports: [SidebarModule, TagModule],
+	templateUrl: './app.profilesidebar.component.html'
+})
+export class AppProfileSidebarComponent {
+	keyCloakManager = inject(KeycloakManager);
+	username :any;
+
+	constructor(public layoutService: LayoutService) {
+		this.username = this.keyCloakManager.getUsername();
+		console.log(this.username,"username")
+	}
+
+	get visible(): boolean {
+		return this.layoutService.state.profileSidebarVisible;
+	}
+
+	set visible(_val: boolean) {
+		this.layoutService.state.profileSidebarVisible = _val;
+	}
+}

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

@@ -1,45 +1,45 @@
-<div class="layout-topbar">
-	<div class="topbar-start">
-		<button #menubutton type="button" class="topbar-menubutton p-link p-trigger" (click)="onMenuButtonClick()">
-			<i class="pi pi-bars"></i>
-		</button>
-
-		<!-- <app-breadcrumb class="topbar-breadcrumb"></app-breadcrumb> -->
-	</div>
-
-	<div class="topbar-end">
-		<ul class="topbar-menu">
-			<li class="topbar-search">
-				<span class="p-input-icon-left">
-					<i class="pi pi-search"></i>
-					<input
-						type="text"
-						pInputText
-						placeholder="Search"
-						class="p-inputtext p-component p-element w-12rem sm:w-full" />
-				</span>
-			</li>
-			<!-- <li class="ml-3">
-				<button
-					pButton
-					type="button"
-					icon="pi pi-cog"
-					class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
-					(click)="onConfigButtonClick()"></button>
-			</li> -->
-			<li class="ml-3">
-				<button
-					pButton
-					type="button"
-					icon="pi pi-power-off"
-					class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
-					(click)="keyCloakManager.logout()"></button>
-			</li>
-			<li class="topbar-profile">
-				<button type="button" class="p-link" (click)="onProfileButtonClick()">
-					<img src="assets/images/avatar.png" alt="Profile" />
-				</button>
-			</li>
-		</ul>
-	</div>
-</div>
+<div class="layout-topbar">
+	<div class="topbar-start">
+		<button #menubutton type="button" class="topbar-menubutton p-link p-trigger" (click)="onMenuButtonClick()">
+			<i class="pi pi-bars"></i>
+		</button>
+
+		<!-- <app-breadcrumb class="topbar-breadcrumb"></app-breadcrumb> -->
+	</div>
+
+	<div class="topbar-end">
+		<ul class="topbar-menu">
+			<li class="topbar-search">
+				<span class="p-input-icon-left">
+					<i class="pi pi-search"></i>
+					<input
+						type="text"
+						pInputText
+						placeholder="Search"
+						class="p-inputtext p-component p-element w-12rem sm:w-full" />
+				</span>
+			</li>
+			<!-- <li class="ml-3">
+				<button
+					pButton
+					type="button"
+					icon="pi pi-cog"
+					class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
+					(click)="onConfigButtonClick()"></button>
+			</li> -->
+			<li class="ml-3" style="border: 1px solid crimson; border-radius: 50%">
+				<button
+					pButton
+					type="button"
+					icon="pi pi-power-off"
+					class="p-button-text p-button-secondary p-button-rounded flex-shrink-0"
+					(click)="keyCloakManager.logout()"></button>
+			</li>
+			<li class="topbar-profile">
+				<button type="button" class="p-link" (click)="onProfileButtonClick()">
+					<img src="assets/images/avatar.png" alt="Profile" />
+				</button>
+			</li>
+		</ul>
+	</div>
+</div>

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

@@ -1,32 +1,32 @@
-import { Component, ElementRef, ViewChild, inject } from '@angular/core';
-
-import { ButtonModule } from 'primeng/button';
-
-import { KeycloakManager } from 'aril/keycloak';
-
-import { LayoutService } from '../../service/app.layout.service';
-import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
-
-@Component({
-	standalone: true,
-	selector: 'app-topbar',
-	imports: [ButtonModule, AppBreadcrumbComponent],
-	templateUrl: './app.topbar.component.html'
-})
-export class AppTopbarComponent {
-	@ViewChild('menubutton') menuButton!: ElementRef;
-
-	layoutService = inject(LayoutService);
-	keyCloakManager = inject(KeycloakManager);
-
-	onMenuButtonClick() {
-		this.layoutService.onMenuToggle();
-	}
-
-	onProfileButtonClick() {
-		this.layoutService.showProfileSidebar();
-	}
-	onConfigButtonClick() {
-		this.layoutService.showConfigSidebar();
-	}
-}
+import { Component, ElementRef, ViewChild, inject } from '@angular/core';
+
+import { ButtonModule } from 'primeng/button';
+
+import { KeycloakManager } from 'aril/keycloak';
+
+import { LayoutService } from '../../service/app.layout.service';
+import { AppBreadcrumbComponent } from '../breadcrumb/app.breadcrumb.component';
+
+@Component({
+	standalone: true,
+	selector: 'app-topbar',
+	imports: [ButtonModule, AppBreadcrumbComponent],
+	templateUrl: './app.topbar.component.html'
+})
+export class AppTopbarComponent {
+	@ViewChild('menubutton') menuButton!: ElementRef;
+
+	layoutService = inject(LayoutService);
+	keyCloakManager = inject(KeycloakManager);
+
+	onMenuButtonClick() {
+		this.layoutService.onMenuToggle();
+	}
+
+	onProfileButtonClick() {
+		this.layoutService.showProfileSidebar();
+	}
+	onConfigButtonClick() {
+		this.layoutService.showConfigSidebar();
+	}
+}