pocket-id-pocket-id-2/frontend/src/lib/components/header/header.svelte

<script lang="ts">
	import { page } from '$app/state';
	import appConfigStore from '$lib/stores/application-configuration-store';
	import userStore from '$lib/stores/user-store';
	import Logo from '../logo.svelte';
	import HeaderAvatar from './header-avatar.svelte';

	const authUrls = [/^\/authorize$/, /^\/login(?:\/.*)?$/, /^\/logout$/];

	let isAuthPage = $derived(
		!page.error && authUrls.some((pattern) => pattern.test(page.url.pathname))
	);
</script>

<div class=" w-full {isAuthPage ? 'absolute top-0 z-10 mt-4' : 'border-b'}">
	<div
		class="{!isAuthPage
			? 'max-w-[1640px]'
			: ''} mx-auto flex w-full items-center justify-between px-4 md:px-10"
	>
		<div class="flex h-16 items-center">
			{#if !isAuthPage}
				<Logo class="mr-3 h-8 w-8" />
				<h1 class="text-lg font-medium" data-testid="application-name">
					{$appConfigStore.appName}
				</h1>
			{/if}
		</div>
		<div class="flex items-center justify-between gap-4">
			{#if $userStore?.id}
				<HeaderAvatar />
			{/if}
		</div>
	</div>
</div>