From 31eb17a9be983e2a1067b530ff8e3e34f2d6ac1f Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Fri, 28 Jul 2023 03:48:39 +0800
Subject: [PATCH] Frontend: added openUserProfile composable

---
 frontend/components/Sidebar.vue | 14 ++++++++------
 frontend/composables/utils.ts   |  6 +++++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/components/Sidebar.vue b/frontend/components/Sidebar.vue
index f8f3d1f..7433fb2 100644
--- a/frontend/components/Sidebar.vue
+++ b/frontend/components/Sidebar.vue
@@ -29,9 +29,7 @@ const userOptions: Array<UserOption> = [
 	{
 		title: 'Profile',
 		icon: 'user',
-		onClick: () => {
-			useRouter().push('/profile')
-		},
+		onClick: () => openUserProfile(),
 	},
 ]
 
@@ -58,17 +56,21 @@ onClickOutside(sidebar, () => {
 						class="hover:cursor-pointer" />
 				</div>
 				<Icon
+					@click="openUserProfile()"
 					name="user"
 					size="36"
-					ref="userIcon" />
-				<div>
+					ref="userIcon"
+					class="hover:cursor-pointer" />
+				<div
+					@click="openUserProfile()"
+					class="hover:cursor-pointer hover:underline">
 					{{ user }}
 				</div>
 			</div>
 			<div ref="userOptionsCard">
 				<div
 					v-for="userOption in userOptions"
-					class="flex w-full items-center p-4 text-xl hover:bg-lightgray"
+					class="flex w-full items-center p-4 text-xl hover:cursor-pointer hover:bg-lightgray"
 					@click="userOption.onClick()">
 					<Icon
 						v-if="userOption.icon"
diff --git a/frontend/composables/utils.ts b/frontend/composables/utils.ts
index 1112e92..5123513 100644
--- a/frontend/composables/utils.ts
+++ b/frontend/composables/utils.ts
@@ -2,8 +2,12 @@ const openUrl = (url: string) => {
 	window.open(url, '_blank')
 }
 
+const openUserProfile = () => {
+	useRouter().push('/profile')
+}
+
 const useSidebar = () => useState<Boolean>('isSidebarActive', () => false)
 const openSidebar = () => [(useSidebar().value = true)]
 const closeSidebar = () => [(useSidebar().value = false)]
 
-export { closeSidebar, openSidebar, openUrl, useSidebar }
+export { closeSidebar, openSidebar, openUrl, openUserProfile, useSidebar }