50 lines
1.7 KiB
Vue
50 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ui_colors_dropdown } from '~/composables/set_colors';
|
|
|
|
const loggedIn = ref(true);
|
|
|
|
const props = defineProps({
|
|
|
|
title: {
|
|
type: String,
|
|
required: false,
|
|
default: "Home"
|
|
}
|
|
|
|
})
|
|
|
|
</script>
|
|
<template>
|
|
<UHeader :toggle="false" class="pop mb-4">
|
|
<template #title>
|
|
<h2 class="font-bold">{{props.title}}</h2>
|
|
</template>
|
|
<template #right>
|
|
<UColorModeButton />
|
|
<UDropdownMenu :items="ui_colors_dropdown">
|
|
<UButton icon="lucide:palette" variant="ghost" color="neutral" />
|
|
</UDropdownMenu>
|
|
<UButton icon="lucide:settings" variant="ghost" color="neutral" v-if="loggedIn" />
|
|
<UModal :ui="{ overlay: 'bg-black opacity-75'}">
|
|
<UButton icon="lucide:log-out" variant="ghost" color="error" 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 dark:bg-zinc-950 hover:dark:bg-zinc-900 active:dark:bg-black" variant="soft" color="neutral" >No</UButton>
|
|
<UButton class="w-full" variant="soft" color="error">Yes</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</UModal>
|
|
<UButton icon="lucide:log-in" variant="soft" color="success" v-if="!loggedIn" >Login</UButton>
|
|
</template>
|
|
</UHeader>
|
|
</template>
|
|
|
|
|