owltide/components/Header.vue

<!--
	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
	SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
	<header>
		<nav>
			<ul>
				<li>
					<NuxtLink to="/">Home</NuxtLink>
				</li>
				<li>
					<NuxtLink to="/schedule">Schedule</NuxtLink>
				</li>
				<li v-if="accountStore.canEdit">
					<NuxtLink to="/edit">Edit</NuxtLink>
				</li>
				<li v-if="accountStore.isAdmin">
					<NuxtLink to="/admin">Admin</NuxtLink>
				</li>
				<li>
					<NuxtLink to="/about">About</NuxtLink>
				</li>
			</ul>
		</nav>
		<div class="account">
			<template v-if="accountStore.valid">
				{{ accountStore.name }}
				(s:{{ sessionStore.id }} a:{{ accountStore.id }}{{ sessionStore.push ? " push" : null }})
				{{ accountStore.type }}
				<NuxtLink to="/account/settings">Settings</NuxtLink>
				<ButtonLogOut v-if="accountStore.type !== 'anonymous'"/>
			</template>
			<template v-else>
				<NuxtLink to="/login">Log In</NuxtLink>
			</template>
		</div>
	</header>
</template>

<script lang="ts" setup>
const accountStore = useAccountStore();
const sessionStore = useSessionStore();
</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;
	list-style: none;
}
</style>