77 lines
1.5 KiB
Vue
77 lines
1.5 KiB
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>
|