Update header to include login/logout button

components/header/Header.vue

@@ -1,3 +1,8 @@
+<script setup lang="ts">
+const router = useRouter()
+const user = useSupabaseUser()
+</script>
+
 <template>
 	<div
 		class="flex h-fit w-full flex-row items-center justify-center border-b border-[var(--el-border-color)] p-2">
@@ -23,6 +28,17 @@
 							<el-dropdown-item @click="navigateTo('/profile')"
 								>Profile</el-dropdown-item
 							>
+							<el-dropdown-item
+								v-if="user"
+								class="danger"
+								@click="userSignOut()"
+								>Sign Out</el-dropdown-item
+							>
+							<el-dropdown-item
+								v-else
+								@click="router.push('/login')"
+								>Sign In</el-dropdown-item
+							>
 						</el-dropdown-menu>
 					</template>
 				</el-dropdown>
@@ -35,4 +51,7 @@
 :deep(.el-dropdown-menu__item) {
 	@apply px-8;
 }
+:deep(.el-dropdown-menu__item:not(.is-disabled):focus.danger) {
+	@apply bg-[--el-color-danger-light-9] text-[--el-color-danger];
+}
 </style>