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