better ui

app/components/main_header.vue

@@ -2,6 +2,7 @@
 import { ui_colors_dropdown } from '~/composables/set_colors';
 
 const loggedIn = ref(true);
+const logout_prompt = ref(false);
 
 const props = defineProps({
 
@@ -9,10 +10,18 @@ const props = defineProps({
     type: String,
     required: false,
     default: "Home"
+  },
+  settings_link: {
+    type: Boolean,
+    required: false,
+    default: true
   }
 
 })
 
+
+
+
 </script>
 <template>
  <UHeader :toggle="false" class="pop mb-4">
@@ -24,8 +33,9 @@ const props = defineProps({
             <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: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" v-if="loggedIn" />
               
               <template #content>
@@ -35,13 +45,14 @@ const props = defineProps({
                     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>
+                    <UButton class="w-full 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" >Login</UButton>
+            <UButton icon="lucide:log-in" variant="soft" color="success" v-if="!loggedIn" to="/login">Login</UButton>
           </template>
     </UHeader>
 </template>