💄 Estilo boton créditos

enflujo · Feb 29, 2024 · a4a7ccf · a4a7ccf
1 parent 64c3186
commit a4a7ccf
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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');
       }
     }
   });