components/header/Header.vue

@@ -1,21 +1,13 @@
 <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="bg-secondary flex h-fit w-full flex-row items-center justify-center 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" />
+            <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">
-				<Icon
-					class="rounded-full bg-secondary hover:cursor-pointer"
-					@click="navigateTo('/profile')"
-					name="fa6-solid:circle-user"
-					size="36" />
+                <Icon class="bg-secondary rounded-full hover:cursor-pointer" @click="navigateTo('/profile')"
+                    name="fa6-solid:circle-user" size="36" />
             </div>
         </div>
     </div>

layouts/main.vue

@@ -1,20 +0,0 @@
-<template>
-	<div class="common-layout">
-		<el-container>
-			<el-header>
-				<Header />
-			</el-header>
-			<el-main>
-				<div class="flex flex-col items-center justify-center">
-					<slot />
-				</div>
-			</el-main>
-		</el-container>
-	</div>
-</template>
-
-<style scoped>
-.el-header {
-	--el-header-padding: 0;
-}
-</style>

pages/login/index.vue

@@ -1,5 +1,7 @@
 <template>
-	<el-card class="w-fit">
+	<App>
+		<Header />
+		<el-card>
 			<div
 				class="mx-auto my-4 flex h-80 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
 				<div class="flex w-full flex-col gap-2">
@@ -39,12 +41,12 @@
 				</button>
 			</div>
 		</el-card>
+	</App>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
 	middleware: ['auth'],
-	layout: 'main',
 })
 
 const credential = reactive({