components/header/Header.vue

@@ -1,22 +1,14 @@
 <template>
-	<div
+    <div class="bg-secondary flex h-fit w-full flex-row items-center justify-center p-2">
-		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 w-full max-w-3xl items-center justify-between gap-4">
+            <div class="flex items-center gap-4 hover:cursor-pointer" @click="navigateTo('/notes')">
-			<div
+                <Icon class="text-blue-500" name="fa6-solid:book-open" />
-				class="flex items-center gap-4 hover:cursor-pointer"
+                <p class="text-xl font-bold"> Notes </p>
-				@click="navigateTo('/notes')">
+            </div>
-				<Icon
+            <div class="flex w-fit justify-end">
-					class="text-blue-500"
+                <Icon class="bg-secondary rounded-full hover:cursor-pointer" @click="navigateTo('/profile')"
-					name="fa6-solid:book-open" />
+                    name="fa6-solid:circle-user" size="36" />
-				<p class="text-xl font-bold"> Notes </p>
+            </div>
-			</div>
+        </div>
-			<div class="flex w-fit justify-end">
+    </div>
-				<Icon
-					class="rounded-full bg-secondary hover:cursor-pointer"
-					@click="navigateTo('/profile')"
-					name="fa6-solid:circle-user"
-					size="36" />
-			</div>
-		</div>
-	</div>
 </template>

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,50 +1,52 @@
 <template>
-	<el-card class="w-fit">
+	<App>
-		<div
+		<Header />
-			class="mx-auto my-4 flex h-80 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
+		<el-card>
-			<div class="flex w-full flex-col gap-2">
+			<div
-				<label class="w-full text-[#b3b3b3]"> Email </label>
+				class="mx-auto my-4 flex h-80 w-96 flex-col items-center justify-center gap-8 rounded-xl p-8">
-				<el-input
+				<div class="flex w-full flex-col gap-2">
-					v-model="credential.email"
+					<label class="w-full text-[#b3b3b3]"> Email </label>
-					placeholder="Username"
+					<el-input
-					clearable
+						v-model="credential.email"
-					class="h-12" />
+						placeholder="Username"
+						clearable
+						class="h-12" />
+				</div>
+				<div class="flex w-full flex-col gap-2">
+					<label class="w-full text-[#b3b3b3]"> Password </label>
+					<el-input
+						v-model="credential.password"
+						type="password"
+						placeholder="Password"
+						show-password
+						class="h-12" />
+				</div>
+				<p
+					class="cursor-pointer text-blue-500 underline"
+					@click="toggleSignup()">
+					{{
+						isSignup
+							? 'Already have an account? Login'
+							: "Don't have an account? Sign up"
+					}}
+				</p>
+				<button
+					class="w-fit rounded-lg bg-blue-500 px-8 py-4"
+					v-on="
+						isSignup
+							? { click: () => signUp() }
+							: { click: () => signIn() }
+					">
+					{{ isSignup ? 'Sign Up' : 'Login' }}
+				</button>
 			</div>
-			<div class="flex w-full flex-col gap-2">
+		</el-card>
-				<label class="w-full text-[#b3b3b3]"> Password </label>
+	</App>
-				<el-input
-					v-model="credential.password"
-					type="password"
-					placeholder="Password"
-					show-password
-					class="h-12" />
-			</div>
-			<p
-				class="cursor-pointer text-blue-500 underline"
-				@click="toggleSignup()">
-				{{
-					isSignup
-						? 'Already have an account? Login'
-						: "Don't have an account? Sign up"
-				}}
-			</p>
-			<button
-				class="w-fit rounded-lg bg-blue-500 px-8 py-4"
-				v-on="
-					isSignup
-						? { click: () => signUp() }
-						: { click: () => signIn() }
-				">
-				{{ isSignup ? 'Sign Up' : 'Login' }}
-			</button>
-		</div>
-	</el-card>
 </template>
 
 <script setup lang="ts">
 definePageMeta({
 	middleware: ['auth'],
-	layout: 'main',
 })
 
 const credential = reactive({