next/components/layouts/navbar.vue

<script lang="ts" setup>
	import { log } from "~/lib/server/logger";

	const itemMap = {
		bands: "/bands",
		authors: "/authors",
		login: "/login",
		register: "/register",
	};
	let cur = ref<string>(
		Object.keys(itemMap).find((a) => itemMap[a] === useRoute().path) ||
			useRoute().path,
	);
	let selected: string[] = [cur.value];
	const clickFn = (minfo) => {
		cur.value = itemMap[minfo.key];
		selected = [cur.value];
		navigateTo(itemMap[minfo.key]);
	};
	console.log({ label: "client", message: cur.value });
	const { data } = useAuth();
</script>

<template>
	<div class="some-wrapper">
		<a-menu
			mode="horizontal"
			class="navibar"
			:style="{
				height: '40px',
				alignSelf: 'center',
				justifyContent: 'stretch',
				// width: '100%'
			}"
			@click="clickFn"
			:active-key="cur"
		>
			<a-menu-item key="bands"> Bands </a-menu-item>
			<a-menu-item key="authors"> Authors </a-menu-item>
		</a-menu>
		<div class="acbut" v-if="!data">
			<a-button size="large" @click="() => navigateTo('/login')">
				log in
			</a-button>
			<a-button
				size="large"
				type="primary"
				@click="() => navigateTo('/register')"
			>
				register
			</a-button>
		</div>
	</div>
</template>
<style scoped>
	.navibar {
		align-self: stretch;
		flex-grow: 1;
		/* min-width: max-content; */
	}

	.acbut {
		justify-content: space-around;
		display: flex;
	}

	.acbut > * + * {
		margin-left: 0.7em;
	}

	.some-wrapper {
		display: flex;
		flex-grow: 1.2;
		justify-content: stretch;
	}
</style>