Polarcraft/webv2/components/body/Sidebar.vue

40 lines
1.4 KiB
Vue

<template>
<div class="fixed left-0 top-0 z-50 flex h-screen w-56 flex-col gap-y-1 border-r border-gray-700 bg-gray-800 px-2">
<h1 class="text-primary-500 my-5 text-center text-2xl font-bold">
Polarcraft S5
</h1>
<NuxtLink to="/" class="flex w-full items-center rounded bg-black/0 p-2 text-lg hover:cursor-pointer hover:bg-black/20">
<Icon size="1.5em" name="heroicons:chart-pie" class="mr-2" />
Dashboard
</NuxtLink>
<NuxtLink to="/team" class="flex w-full items-center rounded bg-black/0 p-2 text-lg hover:cursor-pointer hover:bg-black/20">
<Icon size="1.5em" name="heroicons:users" class="mr-2" />
Team
</NuxtLink>
<NuxtLink to="/map" class="flex w-full items-center rounded bg-black/0 p-2 text-lg hover:cursor-pointer hover:bg-black/20">
<Icon size="1.5em" name="heroicons:map" class="mr-2" />
Map
</NuxtLink>
<div class="mb-5 mt-auto flex w-full items-center rounded bg-black/0 p-2 text-lg hover:cursor-pointer hover:bg-black/20" @click="logout">
<Icon size="1.5em" name="heroicons:arrow-right-on-rectangle" class="mr-2" />
Logout
</div>
</div>
</template>
<script setup>
const logout = async () => {
try {
await useFetch('/api/auth', {
method: 'DELETE'
})
navigateTo('/login')
} catch (e) {
console.error(e)
useToast().add({ title: e.statusMessage, color: 'red' })
}
}
</script>