<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>