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 }}
				(s:{{ session.id }} a:{{ session.account.id }}{{ session.push ? " push" : null }})
				{{ session.account.type }}
				<NuxtLink to="/account/settings">Settings</NuxtLink>
				<LogOutButton v-if="session.account.type !== 'anonymous'"/>
			</template>
			<template v-else>
				<NuxtLink to="/login">Log In</NuxtLink>
			</template>
		</div>
	</header>
</template>

<script lang="ts" setup>
const { data: session } = await useAccountSession();
</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;
}
</style>