From d2963477450ec573ad2eae5bb8d50ee53caf3b30 Mon Sep 17 00:00:00 2001
From: Adrian Delgado <git@adrianjdelgado.com>
Date: Mon, 5 Aug 2024 12:26:12 -0500
Subject: [PATCH] Refactor Navbar

---
 src/lib/components/layout/Navbar.svelte | 37 +++++++++++++++++++++++++
 src/routes/+layout.svelte               |  6 ++--
 src/routes/components/Navbar.svelte     | 34 -----------------------
 3 files changed, 40 insertions(+), 37 deletions(-)
 create mode 100644 src/lib/components/layout/Navbar.svelte
 delete mode 100644 src/routes/components/Navbar.svelte

diff --git a/src/lib/components/layout/Navbar.svelte b/src/lib/components/layout/Navbar.svelte
new file mode 100644
index 0000000..83d28eb
--- /dev/null
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5f88a65..83ea84c 100644
--- a/src/routes/+layout.svelte
+++ b/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 />
diff --git a/src/routes/components/Navbar.svelte b/src/routes/components/Navbar.svelte
deleted file mode 100644
index 042367a..0000000
--- a/src/routes/components/Navbar.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<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="relative flex items-center justify-between bg-black p-4">
-	<div class="flex items-center">
-		<img src={logo} alt="Logo" class="mr-4 h-10" />
-	</div>
-	<div class="flex space-x-8 text-lg text-white">
-		{#each LINKS as { href, text }}
-			<a {href} class="font-bold hover:underline">
-				{#if current_path === href}
-					<span class="text-green-400">{"{"}</span>
-					<span>{text}</span>
-					<span class="text-green-400">{"}"}</span>
-				{:else}
-					<span>{text}</span>
-				{/if}
-			</a>
-		{/each}
-	</div>
-	<div class="absolute bottom-0 left-0 z-0 h-px w-full bg-green-500"></div>
-</nav>