From cdec15860afc241e5b883a0f6b48c6a40b539dcb Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sun, 17 Sep 2023 05:40:27 +0800
Subject: [PATCH] Update header to include login/logout button

---
 components/header/Header.vue | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/components/header/Header.vue b/components/header/Header.vue
index e02e4ff..f7e3d3d 100644
--- a/components/header/Header.vue
+++ b/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>