<template>
	<div
		class="flex h-fit w-full flex-row items-center justify-center border-b border-[var(--el-border-color)] p-2">
		<div class="flex w-full max-w-3xl items-center justify-between gap-4">
			<div
				class="flex items-center gap-4 hover:cursor-pointer"
				@click="navigateTo('/notes')">
				<Icon
					class="text-blue-500"
					name="fa6-solid:book-open" />
				<p class="text-xl font-bold"> Notes </p>
			</div>
			<div class="flex w-fit justify-end">
				<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>
