Nav & Header (#53)

* Add line style in nav

* Add line design

* Change line design and nav responsive

* Create Heading

* Add Heading

* Corrections in lint

* others

* Delete nodesource_setup.sh

---------

Co-authored-by: Alexander Goussas <[email protected]>

src/lib/components/layout/Heading.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let title: string; // Recibirá el título que se mostrará
+</script>
+
+<section class="heading-section">
+	<div class="heading-container">
+		<h1>{title}</h1>
+	</div>
+</section>
+
+<style>
+	.heading-section {
+		background-image: url("$lib/assets/forms/frame.svg"); /* Asegúrate de colocar la ruta correcta a tu SVG */
+		background-size: 100%;
+		align-items: center;
+		height: 25rem;
+		display: flex;
+	}
+
+	.heading-container {
+		color: black; /* Cambia a blanco si lo necesitas */
+		margin-left: 10%;
+	}
+
+	h1 {
+		font-size: 3rem;
+		font-weight: bold;
+	}
+</style>

src/lib/components/layout/Navbar.svelte

@@ -4,20 +4,36 @@
 
 	const current_path = $derived($page.url.pathname);
 
+	let menuOpen = $state(false);
+
 	const LINKS = [
 		{ text: "Inicio", href: "/" },
 		{ text: "Eventos", href: "/events" },
 		{ text: "Proyectos", href: "/projects" },
 		{ text: "Contacto", href: "/contact" },
 		{ text: "Miembros", href: "/members" },
 	];
+
+	const toggleMenu = () => {
+		menuOpen = !menuOpen;
+	};
+
+	const closeMenu = () => {
+		menuOpen = false;
+	};
 </script>
 
-<nav class="flex items-center justify-between p-4">
-	<img src={gecko_code} alt="Logo de Kokoa" width="52.9" height="24.4" />
-	<div class="flex gap-x-8 text-lg">
+<nav class="nav-background flex items-center justify-between p-4">
+	<img src={gecko_code} alt="Logo de Kokoa" width="105.8" height="48.8" style="margin-left:5%" />
+	<!-- Botón del menú hamburguesa en pantallas pequeñas -->
+	<button class="hamburger" onclick={toggleMenu}>
+		<span class="line"></span>
+		<span class="line"></span>
+		<span class="line"></span>
+	</button>
+	<div class="links links relative z-10 flex gap-x-8 text-lg {menuOpen ? 'open' : ''}">
 		{#each LINKS as { href, text } (href)}
-			<a {href} class="relative font-fira hover:underline">
+			<a {href} class="relative font-fira hover:underline" onclick={closeMenu}>
 				<span
 					aria-hidden="true"
 					class="absolute -left-3 text-lime-500 {current_path !== href ? 'hidden' : ''}"
@@ -35,3 +51,71 @@
 		{/each}
 	</div>
 </nav>
+
+<style>
+	nav {
+		position: relative;
+		height: 150px;
+		margin-bottom: 2%;
+	}
+	.nav-background {
+		background-image: url("$lib/assets/forms/line.svg");
+		background-repeat: no-repeat;
+		top: 20px;
+		background-size: 97% auto;
+	}
+	.links {
+		margin-right: 70px;
+	}
+
+	.hamburger {
+		display: none;
+		flex-direction: column;
+		gap: 4px;
+		cursor: pointer;
+		background: none;
+		border: none;
+	}
+
+	.hamburger .line {
+		width: 25px;
+		height: 3px;
+		background-color: white;
+	}
+
+	/* Estilos para pantallas pequeñas */
+	@media (max-width: 768px) {
+		.links {
+			position: fixed;
+			inset: 0; /* El menú ocupará toda la pantalla */
+			background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro para mayor visibilidad */
+			z-index: 50; /* Asegurar que esté por delante de otros elementos */
+			display: none; /* Ocultar por defecto */
+			padding-top: 20px;
+			flex-direction: column;
+			align-items: center;
+			height: auto;
+			width: 100%;
+		}
+
+		nav img {
+			margin-bottom: 5rem;
+		}
+		.links.open {
+			display: flex; /* Mostrar el menú cuando esté abierto */
+		}
+
+		.hamburger {
+			display: flex;
+			margin-right: 20px;
+			margin-bottom: 5rem;
+		}
+	}
+
+	@media (min-width: 769px) {
+		.links {
+			display: flex;
+			gap: 2.5rem;
+		}
+	}
+</style>

src/routes/events/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 	import Event from "$lib/components/Event.svelte";
+	import Heading from "$lib/components/layout/Heading.svelte";
 
 	let { data } = $props();
 </script>
 
-<div class="flex flex-wrap items-center px-8">
+<Heading title="EVENTOS" />
+<div class="flex flex-col items-center px-8">
 	{#each data.events as event}
 		<Event
 			name={event.name}

src/routes/projects/+page.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
+	import Heading from "$lib/components/layout/Heading.svelte";
 	import Project from "$lib/components/Project.svelte";
-
+  
 	let { data } = $props();
 </script>
 
 <svelte:head>
 	<title>Proyectos | KOKOA</title>
 </svelte:head>
 
+<Heading title="PROYECTOS" />
+
 <div class="p-8">
-	<h1 class="mb-2 font-fira text-xl text-lime-400">Proyectos</h1>
 	<p class="font-fira font-medium">
 		Estos son algunos de los proyectos que hemos realizado en conjunto.
 	</p>