116 lines
3.0 KiB
Vue
116 lines
3.0 KiB
Vue
<script setup lang='ts'>
|
|
const user = useSupabaseUser()
|
|
const client = useSupabaseClient()
|
|
const router = useRouter()
|
|
|
|
const isLoggingOut = ref(false)
|
|
|
|
async function logout() {
|
|
isLoggingOut.value = true
|
|
const { error } = await client.auth.signOut()
|
|
isLoggingOut.value = false
|
|
|
|
if (error) {
|
|
console.error('Logout failed:', error)
|
|
} else {
|
|
router.push('/')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="container">
|
|
<ul>
|
|
<li>
|
|
<NuxtLink to="/">
|
|
<strong>Paper Dynasty</strong>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li>
|
|
<NuxtLink to='/players/random'>Random Card</NuxtLink>
|
|
</li>
|
|
|
|
<li>
|
|
<NuxtLink to='/players/69'>Card 69</NuxtLink>
|
|
</li>
|
|
|
|
<li><a href="#">Shop</a></li>
|
|
|
|
<li v-if="user?.id" class="user-info">
|
|
<NuxtLink to='/my-team'>
|
|
<img
|
|
:src='user.user_metadata?.avatar_url || "/default-avatar.png"'
|
|
alt="My Team"
|
|
class="profile-pic"
|
|
/>
|
|
</NuxtLink>
|
|
|
|
<button
|
|
@click="logout"
|
|
:disabled="isLoggingOut"
|
|
class="logout-btn"
|
|
>
|
|
<template v-if="isLoggingOut">
|
|
<svg class="animate-spin h-4 w-4 text-red-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
|
|
</svg>
|
|
<span>Logging out...</span>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<span>Logout</span>
|
|
</template>
|
|
</button>
|
|
</li>
|
|
|
|
<li v-else>
|
|
<NuxtLink to="/login/auto">Login with Discord</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<style>
|
|
button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Set a fixed size for the profile image */
|
|
.profile-pic {
|
|
width: 24px; /* Shrinks to 24px */
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
object-fit: cover; /* Ensures image maintains aspect ratio */
|
|
margin-right: 10px; /* Adds space between the image and other elements */
|
|
}
|
|
|
|
/* Styling for the logout button */
|
|
.logout-btn {
|
|
font-size: 0.8rem;
|
|
color: var(--color-primary);
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Optional: Adjust the layout if needed */
|
|
.menu {
|
|
display: flex;
|
|
list-style: none;
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
}
|
|
|
|
.menu li {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style> |