Added header avatar dropdown

components/header/Header.vue

@@ -11,12 +11,28 @@
 				<p class="text-xl font-bold"> Notes </p>
 			</div>
 			<div class="flex w-fit justify-end">
-				<Icon
-					class="rounded-full bg-secondary hover:cursor-pointer"
-					@click="navigateTo('/profile')"
-					name="fa6-solid:circle-user"
-					size="36" />
+				<el-dropdown trigger="click">
+					<span class="el-dropdown-link">
+						<Icon
+							class="rounded-full bg-secondary hover:cursor-pointer"
+							name="fa6-solid:circle-user"
+							size="36" />
+					</span>
+					<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item @click="navigateTo('/profile')"
+								>Profile</el-dropdown-item
+							>
+						</el-dropdown-menu>
+					</template>
+				</el-dropdown>
 			</div>
 		</div>
 	</div>
 </template>
+
+<style scoped>
+:deep(.el-dropdown-menu__item) {
+	@apply px-8;
+}
+</style>