changes

app/components/main_header.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
+import { ui_colors_dropdown } from '~/composables/set_colors';
 
+const loggedIn = ref(true);
 
 const props = defineProps({
-  ui_colors: {
-    type: Array,
-    required: true
-  },
+
   title: {
     type: String,
     required: false,
@@ -22,10 +21,28 @@ const props = defineProps({
         </template>
         <template #right>
             <UColorModeButton />
-            <UDropdownMenu :items="props.ui_colors">
+            <UDropdownMenu :items="ui_colors_dropdown">
                 <UButton icon="lucide:palette" variant="ghost" color="neutral" />
             </UDropdownMenu>
-        </template>
+            <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>