feat(components): add login + register buttons to navbar

components/layouts/navbar.vue

@@ -1,28 +1,76 @@
-<script lang="ts" setup>
-const itemMap = {
-	"bands": "/bands",
-	"authors": "/authors"
-};
-let cur = Object.keys(itemMap).find(a => itemMap[a] === useRoute().name) || "";
-let selected: string[] = [cur]
-const clickFn = (minfo) => {
-	navigateTo(itemMap[ minfo.key ])
-}
-</script>
-
-<template>
-	<a-menu mode="horizontal" class="navibar" :style="{
-		height: '40px',
-		alignSelf: 'center',
-		justifyContent: 'stretch'
-		}" @click="clickFn" :selectedKeys="selected">
-		<a-menu-item key="bands">
-			Bands
-		</a-menu-item>
-	</a-menu>
-</template>
-<style scoped>
-	.navibar {
-		align-self: stretch;
-	}
-</style>
+<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>