From 77e89ad55b5bffcf788f910652ab021d21f91dd9 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Thu, 27 Jul 2023 07:52:17 +0800
Subject: [PATCH] Frontend: replaced user options with sidebar

---
 frontend/components/Header.vue  | 58 +--------------------
 frontend/components/Sidebar.vue | 91 +++++++++++++++++++++++++++++++++
 frontend/composables/utils.ts   |  6 ++-
 frontend/pages/index.vue        |  1 +
 4 files changed, 99 insertions(+), 57 deletions(-)
 create mode 100644 frontend/components/Sidebar.vue

diff --git a/frontend/components/Header.vue b/frontend/components/Header.vue
index c08dc1f..433f35b 100644
--- a/frontend/components/Header.vue
+++ b/frontend/components/Header.vue
@@ -1,74 +1,20 @@
 <script setup lang="ts">
-const userOptionsCard = ref()
 const userIcon = ref()
-const showUserOptions = ref<Boolean>(false)
 
 const toggleUserOptions = () => {
-	showUserOptions.value = !showUserOptions.value
+	openSidebar()
 }
-
-onClickOutside(
-	userOptionsCard,
-	() => {
-		toggleUserOptions()
-	},
-	{ ignore: [userIcon] }
-)
-
-const logout = async () => {
-	await userLogout()
-	useRouter().push('/login')
-}
-
-type UserOption = {
-	title: string
-	onClick: () => void
-}
-
-const userOptions: Array<UserOption> = [
-	{
-		title: 'Github',
-		onClick: () => {
-			openUrl('https://github.com/TZGyn')
-			toggleUserOptions()
-		},
-	},
-	{
-		title: 'Log Out',
-		onClick: async () => {
-			await logout()
-			toggleUserOptions()
-		},
-	},
-	{
-		title: 'Profile',
-		onClick: () => {
-			useRouter().push('/profile')
-		},
-	},
-]
 </script>
 
 <template>
 	<div
 		class="flex h-14 w-screen items-center justify-between bg-primary px-4">
-		<div class="relative">
+		<div>
 			<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.onClick()">
-					{{ userOption.title }}
-				</div>
-			</div>
 		</div>
 		<div class="flex gap-4">
 			<Icon
diff --git a/frontend/components/Sidebar.vue b/frontend/components/Sidebar.vue
new file mode 100644
index 0000000..f8f3d1f
--- /dev/null
+++ b/frontend/components/Sidebar.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+const isSidebarActive = useSidebar()
+const user = useUser()
+
+const sidebar = ref<HTMLElement | undefined>()
+
+type UserOption = {
+	title: string
+	icon?: string
+	onClick: () => void
+}
+
+const userOptions: Array<UserOption> = [
+	{
+		title: 'Github',
+		icon: 'github',
+		onClick: () => {
+			openUrl('https://github.com/TZGyn')
+		},
+	},
+	{
+		title: 'Log Out',
+		icon: 'mdi:logout',
+		onClick: async () => {
+			await userLogout()
+			useRouter().push('/login')
+		},
+	},
+	{
+		title: 'Profile',
+		icon: 'user',
+		onClick: () => {
+			useRouter().push('/profile')
+		},
+	},
+]
+
+onClickOutside(sidebar, () => {
+	closeSidebar()
+})
+</script>
+
+<template>
+	<div>
+		<div
+			ref="sidebar"
+			class="absolute z-50 h-screen w-80 max-w-full border-r-2 border-r-secondary bg-primary font-bold transition-transform"
+			:class="{
+				'-translate-x-full': !isSidebarActive,
+				'translate-x-0': isSidebarActive,
+			}">
+			<div class="mb-4 flex flex-col gap-4 p-4">
+				<div class="flex justify-between">
+					<div>Account Info</div>
+					<Icon
+						@click="closeSidebar()"
+						name="close"
+						class="hover:cursor-pointer" />
+				</div>
+				<Icon
+					name="user"
+					size="36"
+					ref="userIcon" />
+				<div>
+					{{ 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"
+					@click="userOption.onClick()">
+					<Icon
+						v-if="userOption.icon"
+						:name="userOption.icon"
+						class="mr-6" />
+					<div>
+						{{ userOption.title }}
+					</div>
+				</div>
+			</div>
+		</div>
+		<div
+			class="absolute z-40 h-screen w-screen bg-white/5"
+			:class="{
+				'-translate-x-full': !isSidebarActive,
+				'translate-x-0': isSidebarActive,
+			}">
+		</div>
+	</div>
+</template>
diff --git a/frontend/composables/utils.ts b/frontend/composables/utils.ts
index 98dd157..1112e92 100644
--- a/frontend/composables/utils.ts
+++ b/frontend/composables/utils.ts
@@ -2,4 +2,8 @@ const openUrl = (url: string) => {
 	window.open(url, '_blank')
 }
 
-export { openUrl }
+const useSidebar = () => useState<Boolean>('isSidebarActive', () => false)
+const openSidebar = () => [(useSidebar().value = true)]
+const closeSidebar = () => [(useSidebar().value = false)]
+
+export { closeSidebar, openSidebar, openUrl, useSidebar }
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index c16c0b3..8e420cc 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -47,6 +47,7 @@ onMounted(() => {
 
 <template>
 	<div class="h-screen overflow-hidden">
+		<Sidebar />
 		<Header />
 		<div class="sticky top-0 flex bg-primary text-center">
 			<div