Refactor Navbar

src/lib/components/layout/Navbar.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import logo from "$lib/assets/images/logo.png";
+
+	const current_path = $derived($page.url.pathname);
+
+	const LINKS = [
+		{ text: "Inicio", href: "/" },
+		{ text: "Eventos", href: "/events" },
+		{ text: "Proyectos", href: "/projects" },
+		{ text: "Contacto", href: "/contact" },
+		{ text: "Miembros", href: "/members" },
+	];
+</script>
+
+<nav class="flex items-center justify-between p-4">
+	<img src={logo} alt="Logo de Kokoa" width="40" height="40" />
+	<div class="flex gap-x-8 text-lg">
+		{#each LINKS as { href, text } (href)}
+			<a {href} class="relative font-bold hover:underline">
+				<span
+					aria-hidden="true"
+					class="absolute -left-2 text-green-400 {current_path !== href ? 'hidden' : ''}"
+				>
+					{"{"}
+				</span>
+				{text}
+				<span
+					aria-hidden="true"
+					class="absolute -right-2 text-green-400 {current_path !== href ? 'hidden' : ''}"
+				>
+					{"}"}
+				</span>
+			</a>
+		{/each}
+	</div>
+</nav>

src/routes/+layout.svelte

@@ -2,7 +2,8 @@
 	import "../app.postcss";
 	import { Toaster } from "svelte-sonner";
 	import { page } from "$app/stores";
-	import Navbar from "./components/Navbar.svelte";
+	import Navbar from "$lib/components/layout/Navbar.svelte";
+
 	let { children } = $props();
 </script>
 
@@ -12,6 +13,5 @@
 </svelte:head>
 
 <Navbar />
-
-<Toaster richColors closeButton />
 {@render children()}
+<Toaster richColors closeButton />