owltide/components/Header.vue

<template>
	<header>
		<nav>
			<ul>
				<NuxtLink to="/">Home</NuxtLink>
				<NuxtLink to="/schedule">Schedule</NuxtLink>
			</ul>
		</nav>
		<div class="account">
			<template v-if="session?.account">
				{{ session.account.name || "anonymous" }}
				(s:{{ session.id }} a:{{ session.account.id }}{{ session.push ? " push" : null }})
				{{ session.account.type }}
				<button type="button" @click="logOut">Log out</button>
			</template>
			<template v-else>
				<NuxtLink to="/login">Log In</NuxtLink>
			</template>
		</div>
	</header>
</template>

<script lang="ts" setup>
const { data: session, refresh: sessionRefresh } = useAccountSession();

async function logOut() {
	try {
		const res = await $fetch.raw("/api/auth/session", {
			method: "DELETE",
		});
		await sessionRefresh();

	} catch (err: any) {
		alert(`Log out failed: ${err.statusCode} ${err.statusMessage}`);
	}
}
</script>

<style scoped>
header {
	line-height: 1.5; /* Prevent layout shift from log out button */
	display: flex;
	column-gap: 1em;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--foreground);
	margin-block-start: 1rem;
}
.account {
	display: flex;
	justify-content: end;
	flex-grow: 1;
	column-gap: 0.5em;
	flex-wrap: wrap;
}
nav ul {
	padding: 0;
	display: flex;
	column-gap: 0.5em;
}
button {
	font-family: inherit;
	font-size: inherit;
}
</style>