update: new header

components/app/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="bg-primary flex h-screen w-full flex-col items-center gap-4 px-12 text-white">
+		class="bg-primary flex h-screen w-full flex-col items-center gap-4 text-white">
 		<slot />
 	</div>
 </template>

components/header/Header.vue

@@ -1,31 +1,22 @@
 <template>
 	<div
-		class="bg-secondary my-3 flex h-16 w-full max-w-3xl flex-row items-center justify-center rounded-lg">
-		<div @click="profile">
-			<img
-				v-if="props.avatar"
-				class="bg-secondary h-12 w-12 rounded-full hover:cursor-pointer"
-				@click="profile"
-				:src="props.avatar"
-				alt="" />
+		class="bg-secondary flex h-fit w-full flex-row items-center justify-center p-4">
+		<div class="flex w-full max-w-3xl items-center justify-between">
+			<div
+				class="flex items-center gap-4 hover:cursor-pointer"
+				@click="navigateTo('/notes')">
 				<Icon
-				v-else
-				class="bg-secondary h-12 w-12 rounded-full hover:cursor-pointer"
+					class="text-blue-500"
+					name="fa6-solid:book-open" />
+				<p class="text-xl font-bold"> Notes </p>
+			</div>
+			<div
+				class="flex w-full justify-end"
+				@click="navigateTo('/profile')">
+				<Icon
+					class="bg-secondary rounded-full hover:cursor-pointer"
 					name="fa6-solid:circle-user" />
 			</div>
 		</div>
+	</div>
 </template>
-
-<script setup lang="ts">
-	interface Props {
-		avatar?: string;
-	}
-
-	const props = defineProps<Props>();
-
-	const router = useRouter();
-
-	const profile = () => {
-		router.push('/profile');
-	};
-</script>