Frontend: added settings to sidebar

frontend/components/Sidebar.vue

@@ -3,6 +3,7 @@ const isSidebarActive = useSidebar()
 const user = useUser()
 
 const sidebar = ref<HTMLElement | undefined>()
+const openSetting = ref<Boolean>(false)
 
 type UserOption = {
 	title: string
@@ -29,9 +30,7 @@ const userOptions: Array<UserOption> = [
 	{
 		title: 'Profile',
 		icon: 'user',
-		onClick: () => {
-			useRouter().push('/profile')
-		},
+		onClick: () => openUserProfile(),
 	},
 ]
 
@@ -58,17 +57,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"
@@ -79,6 +82,25 @@ onClickOutside(sidebar, () => {
 					</div>
 				</div>
 			</div>
+			<div class="mt-4 flex flex-col border-t-2 border-t-lightgray">
+				<div
+					@click="openSetting = !openSetting"
+					class="flex justify-between p-4 hover:cursor-pointer hover:bg-lightgray">
+					<div>Settings</div>
+					<Icon
+						name="mdi:chevron-up"
+						class="transition-transform"
+						:class="{
+							'rotate-0': !openSetting,
+							'-rotate-180': openSetting,
+						}" />
+				</div>
+				<div
+					v-if="openSetting"
+					class="px-4 py-2 hover:cursor-pointer hover:bg-lightgray">
+					Delete Account
+				</div>
+			</div>
 		</div>
 		<div
 			class="absolute z-40 h-screen w-screen bg-white/5"

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 }