Template
52 lines
1.0 KiB
Vue
52 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
|
|
import { useUserStore } from '~/store/user.store';
|
|
|
|
const userStore = useUserStore();
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<header>
|
|
<div id="self">
|
|
<template v-if="userStore.has_contacted">
|
|
<ClientOnly>
|
|
<template v-if="userStore.self && userStore.self.id">
|
|
<User :id="userStore.self.id"></User>
|
|
<button>Logout</button>
|
|
</template>
|
|
<button v-else>Login</button>
|
|
</ClientOnly>
|
|
</template>
|
|
|
|
<template v-else>
|
|
Contacting server...
|
|
</template>
|
|
</div>
|
|
|
|
<div id="links">
|
|
<NuxtLink to="/">Home</NuxtLink>
|
|
<NuxtLink to="/words">Words</NuxtLink>
|
|
</div>
|
|
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
header,
|
|
header * {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
div#self {
|
|
height: 32px
|
|
}
|
|
|
|
div#links {
|
|
width: 100%;
|
|
gap: 1%;
|
|
}
|
|
</style> |