67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<script setup>
|
|
import ThemeToggle from './ThemeToggle.vue'
|
|
|
|
const props = defineProps(['modelValue'])
|
|
defineEmits(['update:modelValue'])
|
|
|
|
async function signout(ev) {
|
|
ev.preventDefault()
|
|
|
|
const api_url = '/api/auth'
|
|
const fetch_options = {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
}
|
|
}
|
|
let resp = await fetch(api_url, fetch_options)
|
|
console.log(resp)
|
|
window.location.reload()
|
|
}
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<nav class="navbar bg-body-tertiary navbar-expand-lg shadow-sm position-relative" aria-label="Chat">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Chat</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarLight"
|
|
aria-controls="offcanvasNavbarLight" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbarLight"
|
|
aria-labelledby="offcanvasNavbarLightLabel">
|
|
|
|
<div class="offcanvas-header">
|
|
<h5 class="offcanvas-title" id="offcanvasNavbarLightLabel">Chat</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="offcanvas-body px-2">
|
|
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
|
|
<!--<li v-if="modelValue !== ''" class="nav-item mx-2 mt-2">-->
|
|
<li v-if="modelValue.hasOwnProperty('username')" class="nav-item mx-2 mt-2">
|
|
<button @click="signout" class="btn btn-outline-success">Sign out</button>
|
|
</li>
|
|
<li class="nav-item mf-3 mt-1">
|
|
<div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.fill-height {
|
|
height: 100vh;
|
|
}
|
|
</style>
|