Files
yt2mp3/app/components/main_header.vue
2026-01-15 01:35:44 +00:00

76 lines
2.3 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
},
logged_in: {
type: Boolean,
required: false,
default: false
}
})
function logout() {
return fetch("/logout").then(
(response) => {
if (response.ok) {
window.location.reload;
}
}
)
}
</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="props.logged_in" />
<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="props.logged_in" />
<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" loading-auto @click="logout()">Yes</UButton>
</div>
</div>
</template>
</UModal>
<UButton icon="lucide:log-in" variant="soft" color="success" v-if="!props.logged_in" to="/login">Login</UButton>
</template>
</UHeader>
</template>