61 lines
2.0 KiB
Vue
61 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { ui_colors_dropdown } from '~/composables/set_colors';
|
|
|
|
const loggedIn = ref(false);
|
|
const logout_prompt = ref(false);
|
|
|
|
const props = defineProps({
|
|
|
|
title: {
|
|
type: String,
|
|
required: false,
|
|
default: "Home"
|
|
},
|
|
settings_link: {
|
|
type: Boolean,
|
|
required: false,
|
|
default: true
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
<template>
|
|
<UHeader :toggle="false" class="pop mb-4">
|
|
<template #title>
|
|
<h2 class="font-bold">{{props.title}}</h2>
|
|
</template>
|
|
<template #right>
|
|
<UColorModeButton class="hover:cursor-pointer" />
|
|
<!----<UDropdownMenu :items="ui_colors_dropdown">
|
|
<UButton icon="lucide:palette" variant="ghost" color="neutral" />
|
|
</UDropdownMenu>-->
|
|
<UButton icon="lucide:settings" variant="ghost" color="neutral" :to="props.settings_link ? '/settings/general' : undefined" v-if="loggedIn" />
|
|
<UModal :ui="{ overlay: 'bg-black opacity-75', content: 'bg-zinc-950 py-3'}" v-model:open="logout_prompt">
|
|
|
|
<UButton icon="lucide:log-out" variant="ghost" color="error" class="hover:cursor-pointer" v-if="loggedIn" />
|
|
|
|
<template #content>
|
|
<div class="p-4 text-center">
|
|
<h2 class="text-lg font-semibold mb-4 geist">Are you sure?</h2>
|
|
<p class="mb-4">
|
|
You will have to login again.
|
|
</p>
|
|
<div class="flex gap-4 flex-col justify-end">
|
|
<UButton class="w-full hover:cursor-pointer dark:bg-zinc-900 hover:dark:bg-zinc-800 active:dark:bg-black" variant="soft" color="neutral" @click="logout_prompt = false">No</UButton>
|
|
<UButton class="w-full" variant="soft" color="error" to="/logout">Yes</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
</UModal>
|
|
<UButton icon="lucide:log-in" variant="soft" color="success" v-if="!loggedIn" to="/login">Login</UButton>
|
|
</template>
|
|
</UHeader>
|
|
</template>
|
|
|
|
|