From fa9f5f7a5340a380ea6bf880a88bde83730379e2 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Fri, 7 Jul 2023 08:34:35 +0800
Subject: [PATCH] Frontend: update header ui

---
 frontend/components/Header.vue | 94 +++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 42 deletions(-)

diff --git a/frontend/components/Header.vue b/frontend/components/Header.vue
index d26a1d1..6cf729f 100644
--- a/frontend/components/Header.vue
+++ b/frontend/components/Header.vue
@@ -4,62 +4,72 @@ const userIcon = ref()
 const showUserOptions = ref<Boolean>(false)
 
 const toggleUserOptions = () => {
-    showUserOptions.value = !showUserOptions.value
+	showUserOptions.value = !showUserOptions.value
 }
 
 onClickOutside(
-    userOptionsCard,
-    () => {
-        toggleUserOptions()
-    },
-    { ignore: [userIcon] }
+	userOptionsCard,
+	() => {
+		toggleUserOptions()
+	},
+	{ ignore: [userIcon] }
 )
 
 const logout = async () => {
-    await userLogout()
-    useRouter().push('/login')
+	await userLogout()
+	useRouter().push('/login')
 }
 
 type UserOption = {
-    title: string
-    function: () => void
+	title: string
+	function: () => void
 }
 
 const userOptions: Array<UserOption> = [
-    {
-        title: 'Github',
-        function: () => {
-            openUrl('https://github.com/TZGyn')
-            toggleUserOptions()
-        },
-    },
-    {
-        title: 'Log Out',
-        function: async () => {
-            await logout()
-            toggleUserOptions()
-        },
-    },
+	{
+		title: 'Github',
+		function: () => {
+			openUrl('https://github.com/TZGyn')
+			toggleUserOptions()
+		},
+	},
+	{
+		title: 'Log Out',
+		function: async () => {
+			await logout()
+			toggleUserOptions()
+		},
+	},
 ]
 </script>
 
 <template>
-    <div
-        class="fixed top-0 flex h-16 w-screen items-center justify-between border-b-2 border-b-lightgray bg-secondary px-4">
-        <div class="flex gap-4">
-            <Icon name="twitter" />
-            <div class="font-bold"> Twitter Clone </div>
-        </div>
-        <div class="relative">
-            <Icon name="user" size="28" ref="userIcon" @click="toggleUserOptions()" />
-            <div v-if="showUserOptions" ref="userOptionsCard"
-                class="absolute right-0 top-8 w-max border border-lightgray bg-secondary">
-                <div v-for="userOption in userOptions"
-                    class="w-full min-w-[120px] border border-lightgray p-4 text-center hover:bg-lightgray"
-                    @click="userOption.function()">
-                    {{ userOption.title }}
-                </div>
-            </div>
-        </div>
-    </div>
+	<div
+		class="flex h-14 w-screen items-center justify-between bg-primary px-4">
+		<div class="relative">
+			<Icon
+				name="user"
+				size="36"
+				ref="userIcon"
+				@click="toggleUserOptions()" />
+			<div
+				v-if="showUserOptions"
+				ref="userOptionsCard"
+				class="absolute left-0 top-8 w-max border border-lightgray bg-secondary">
+				<div
+					v-for="userOption in userOptions"
+					class="w-full min-w-[120px] border border-lightgray p-4 text-center hover:bg-lightgray"
+					@click="userOption.function()">
+					{{ userOption.title }}
+				</div>
+			</div>
+		</div>
+		<div class="flex gap-4">
+			<Icon
+				name="twitter"
+				size="28"
+				class="text-sky-500" />
+		</div>
+		<div class="invisible h-8 w-8"></div>
+	</div>
 </template>