initial commit

frontend/src/lib/components/header/header-avatar.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import * as Avatar from '$lib/components/ui/avatar';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import WebAuthnService from '$lib/services/webauthn-service';
+	import userStore from '$lib/stores/user-store';
+	import { LucideLogOut, LucideUser } from 'lucide-svelte';
+
+	const webauthnService = new WebAuthnService();
+
+	let initials = $derived(
+		($userStore!.firstName.charAt(0) + $userStore!.lastName?.charAt(0)).toUpperCase()
+	);
+
+	function logout() {
+		webauthnService.logout();
+		window.location.reload();
+	}
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger
+		><Avatar.Root>
+			<Avatar.Fallback>{initials}</Avatar.Fallback>
+		</Avatar.Root></DropdownMenu.Trigger
+	>
+	<DropdownMenu.Content class="w-40" align="start">
+		<DropdownMenu.Label class="font-normal">
+			<div class="flex flex-col space-y-1">
+				<p class="text-sm font-medium leading-none">
+					{$userStore?.firstName}
+					{$userStore?.lastName}
+				</p>
+				<p class="text-xs leading-none text-muted-foreground">{$userStore?.email}</p>
+			</div>
+		</DropdownMenu.Label>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Group>
+			<DropdownMenu.Item href="/settings/account"
+				><LucideUser class="mr-2 h-4 w-4" /> My Account</DropdownMenu.Item
+			>
+			<DropdownMenu.Item on:click={logout}
+				><LucideLogOut class="mr-2 h-4 w-4" /> Logout</DropdownMenu.Item
+			>
+		</DropdownMenu.Group>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

frontend/src/lib/components/header/header.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import applicationConfigurationStore from '$lib/stores/application-configuration-store';
+	import userStore from '$lib/stores/user-store';
+	import Logo from '../logo.svelte';
+	import HeaderAvatar from './header-avatar.svelte';
+
+	let isAuthPage = $derived(
+		!$page.error && ($page.url.pathname.startsWith('/authorize') || $page.url.pathname.startsWith('/login'))
+	);
+</script>
+
+<div class=" w-full {isAuthPage ? 'absolute top-0 z-10 mt-4' : 'border-b'}">
+	<div class="mx-auto flex w-full max-w-[1520px] items-center justify-between px-4 md:px-10">
+		<div class="flex h-16 items-center">
+			{#if !isAuthPage}
+				<Logo class="mr-3 h-10 w-10" />
+				<h1 class="text-lg font-medium" data-testid="application-name">
+					{$applicationConfigurationStore.appName}
+				</h1>
+			{/if}
+		</div>
+		{#if $userStore?.id}
+			<HeaderAvatar />
+		{/if}
+	</div>
+</div>