clean up

src/lib/components/container/navbar/navbar.svelte

@@ -1,9 +1,8 @@
-<script>
-	import { Home, DollarSign, Mail, LogIn } from 'lucide-svelte';
+<script lang="ts">
+	import { Home, DollarSign, Mail, LogIn, LogOut } from 'lucide-svelte';
 	import { goto } from '$app/navigation';
 
 	export let data;
-	console.log('navar', data);
 </script>
 
 <header class="flex items-center justify-between p-4">
@@ -18,10 +17,25 @@
 			<Mail class="mr-2 h-4 w-4" /> Contact
 		</button>
 	</nav>
-	<button
-		on:click={() => goto('/login')}
-		class="flex items-center rounded-full bg-red-500 px-4 py-2 text-white transition-colors duration-200 hover:bg-red-600"
-	>
-		<LogIn class="mr-2 h-4 w-4" /> Log In
-	</button>
+
+	{#if data.user}
+		<div class="flex items-center space-x-4">
+			<span class="text-white">{data.user.email}</span>
+			<form action="/logout" method="POST">
+				<button
+					type="submit"
+					class="flex items-center rounded-full bg-red-500 px-4 py-2 text-white transition-colors duration-200 hover:bg-red-600"
+				>
+					<LogOut class="mr-2 h-4 w-4" /> Log Out
+				</button>
+			</form>
+		</div>
+	{:else}
+		<button
+			on:click={() => goto('/login')}
+			class="flex items-center rounded-full bg-red-500 px-4 py-2 text-white transition-colors duration-200 hover:bg-red-600"
+		>
+			<LogIn class="mr-2 h-4 w-4" /> Log In
+		</button>
+	{/if}
 </header>

src/routes/(home)/+page.svelte

@@ -13,12 +13,10 @@
 	];
 
 	export let data;
-
-	console.log(data);
 </script>
 
 <div class="min-h-screen bg-gradient-to-br font-sans text-white">
-	<Navbar />
+	<Navbar data />
 
 	<main class="container mx-auto px-4 py-16 text-center">
 		<h1 in:fly={{ y: -50, duration: 500 }} class="mb-8 text-6xl font-bold">

src/routes/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	return {
+		user: locals.user
+	};
+};