From a4a7ccf3adcc486b813b815369d0f87cb49c178c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juan=20Camilo=20Gonz=C3=A1lez?=
 <j.gonzalezj@uniandes.edu.co>
Date: Thu, 29 Feb 2024 15:57:46 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Estilo=20boton=20cr=C3=A9ditos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/componentes/Cabezote.astro |  7 ++++++-
 src/componentes/Creditos.astro | 15 +++++++++++----
 src/utilidades/ayudas.ts       |  1 +
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/componentes/Cabezote.astro b/src/componentes/Cabezote.astro
index 2a5709b..8e6395b 100644
--- a/src/componentes/Cabezote.astro
+++ b/src/componentes/Cabezote.astro
@@ -13,7 +13,7 @@ const paginaActual = pathname.replace(urlBase, '').replaceAll('/', '');
     <span class="lineaMenu"></span>
   </div>
 
-  <div id="botonCreditos">Créditos</div>
+  <div id="botonCreditos" class="activo">Créditos</div>
 
   <div id="encabezado">
     <h1>Haciendo Caminos</h1>
@@ -194,6 +194,11 @@ const paginaActual = pathname.replace(urlBase, '').replaceAll('/', '');
         background-color: rgba(255, 255, 255, 0.3);
         color: white;
       }
+
+      &.activo {
+        background-color: #62e5947c;
+        color: white;
+      }
     }
   }
 
diff --git a/src/componentes/Creditos.astro b/src/componentes/Creditos.astro
index dc99476..dea0fc6 100644
--- a/src/componentes/Creditos.astro
+++ b/src/componentes/Creditos.astro
@@ -43,20 +43,27 @@
   <script>
     import { cerrarClicFuera } from '../utilidades/ayudas.ts';
     const botonCerrarCreditos = document.getElementById('cerrarCreditos') as HTMLDivElement;
-    const botonAbrirCreditos = document.getElementById('botonCreditos') as HTMLDivElement;
+    const botonCreditos = document.getElementById('botonCreditos') as HTMLDivElement;
     const creditos = document.getElementById('creditos') as HTMLDivElement;
 
     botonCerrarCreditos.onclick = () => {
       creditos.classList.remove('visible');
+      botonCreditos.classList.remove('activo');
     };
 
     // Abrir y cerrar Creditos
-    botonAbrirCreditos.onclick = () => {
-      creditos.classList.add('visible');
+    botonCreditos.onclick = () => {
+      creditos.classList.toggle('visible');
+
+      if (creditos.classList.contains('visible')) {
+        botonCreditos.classList.add('activo');
+      } else {
+        botonCreditos.classList.remove('activo');
+      }
     };
 
     // Cerrar al hacer click fuera de creditos
-    cerrarClicFuera(creditos, botonAbrirCreditos);
+    cerrarClicFuera(creditos, botonCreditos);
   </script>
 
   <style lang="scss">
diff --git a/src/utilidades/ayudas.ts b/src/utilidades/ayudas.ts
index 4605b8f..c2a9390 100644
--- a/src/utilidades/ayudas.ts
+++ b/src/utilidades/ayudas.ts
@@ -22,6 +22,7 @@ export function cerrarClicFuera(elemento: HTMLElement, elemento2?: HTMLElement)
     if (!(elemento === evento.target || elemento.contains(evento.target as Node) || elemento2 === evento.target)) {
       if (elemento.classList.contains('visible')) {
         elemento.classList.remove('visible');
+        elemento2?.classList.remove('activo');
       }
     }
   });