highlight subnavbar links with current slide

DemocraciaEnRed · Feb 20, 2025 · ec505c1 · ec505c1
1 parent b527a07
commit ec505c1
Show file tree

Hide file tree

Showing 12 changed files with 106 additions and 43 deletions.
diff --git a/src/components/informe/informe.astro b/src/components/informe/informe.astro
@@ -35,7 +35,7 @@ import { Icon } from "astro-icon/components";
       left: 0;
       width: 100vw;
       height: 100vh;
-      background: rgba(0, 0, 0, 0.9);
+      background: rgba(0, 0, 0, 0.99);
       color: white;
       font-size: 2rem;
       z-index: 9999;
@@ -80,7 +80,28 @@ import { Icon } from "astro-icon/components";
       initReveal();
     } //else deck.destroy();
   });
+  deck.on("slidechanged", () => {
+    const slideId = deck.getCurrentSlide().id;
+    if (slideId) window.location.hash = "/" + slideId;
+    highlightLinks();
+  });
+
   // deck.addEventListener("ready", function (event) {
   //   deck.slide(2, 7); //go to slide horizontal / vertical
   // });
+
+  function highlightLinks() {
+    const allLinks = document.querySelectorAll(".links-subnavbar");
+    const active = allLinks[deck.getIndices().h];
+
+    allLinks.forEach((el) => {
+      el?.parentElement?.classList.remove("bg-primary-500");
+      el?.parentElement?.classList.remove("text-white");
+    });
+
+    if (active) {
+      active?.parentElement?.classList.add("bg-primary-500");
+      active?.parentElement?.classList.add("text-white");
+    }
+  }
 </script>
diff --git a/src/components/informe/item-slider/caratula.astro b/src/components/informe/item-slider/caratula.astro
@@ -9,7 +9,7 @@ import silent from "../../../assets/silent.png";
     <div class="w-8/12 mx-auto text-left leading-8">
       <ul class="list-disc">
         <li>
-          <a href="/periodistas-amenazadas/#/">indice</a>
+          <a href="/periodistas-amenazadas/informe/#/">indice</a>
         </li>
         <li>
           <a href="/periodistas-amenazadas/informe/#/seccionViolencia"
@@ -18,19 +18,19 @@ import silent from "../../../assets/silent.png";
           <ul class="dashed px-4">
             <li>
               <a
-                href="/periodistas-amenazadas/informe/#/sectionViolenciasViolencia"
+                href="/periodistas-amenazadas/informe/#/seccionViolenciasViolencia"
                 >violencia sufrida por las encuestadas</a
               >
             </li>
             <li>
               <a
-                href="/periodistas-amenazadas/informe/#/sectionViolenciasMomento"
+                href="/periodistas-amenazadas/informe/#/seccionViolenciasMomento"
                 >momento de ocurrencia de la violencia</a
               >
             </li>
             <li>
               <a
-                href="/periodistas-amenazadas/informe/#/sectionViolenciasAutores"
+                href="/periodistas-amenazadas/informe/#/seccionViolenciasAutores"
                 >tipos de violencias</a
               >
             </li>
@@ -43,26 +43,25 @@ import silent from "../../../assets/silent.png";
           <ul class="dashed px-4">
             <li>
               <a
-                href="/periodistas-amenazadas/informe/#/seccionPercepcionesIngresos"
+                href="/periodistas-amenazadas/informe/#/seccionMitigacionMedidas"
                 >Medidas</a
               >
             </li>
             <li>
-              <a
-                href="/periodistas-amenazadas/informe/#/seccionPercepcionesDificultad"
+              <a href="/periodistas-amenazadas/informe/#/seccionMitigacionGrado"
                 >Grado</a
               >
             </li>
             <li>
               <a
-                href="/periodistas-amenazadas/informe/#/seccionPercepcionesNoticias"
+                href="/periodistas-amenazadas/informe/#/seccionMitigacionImpacto"
                 >Impacto</a
               >
             </li>
             <li>
               <a
-                href="/periodistas-amenazadas/informe/#/seccionPercepcionesCuidado"
-                >Reaccion</a
+                href="/periodistas-amenazadas/informe/#/seccionMitigacionReaccion"
+                >Reacción</a
               >
             </li>
           </ul>
@@ -71,6 +70,32 @@ import silent from "../../../assets/silent.png";
           <a href="/periodistas-amenazadas/informe/#/seccionPercepciones"
             >Percepciones</a
           >
+          <ul class="dashed px-4">
+            <li>
+              <a
+                href="/periodistas-amenazadas/informe/#/seccionPercepcionesIngresos"
+                >Ingresos</a
+              >
+            </li>
+            <li>
+              <a
+                href="/periodistas-amenazadas/informe/#/seccionPercepcionesDificultad"
+                >Dificultad</a
+              >
+            </li>
+            <li>
+              <a
+                href="/periodistas-amenazadas/informe/#/seccionPercepcionesNoticias"
+                >Noticias</a
+              >
+            </li>
+            <li>
+              <a
+                href="/periodistas-amenazadas/informe/#/seccionPercepcionesCuidados"
+                >Cuidados</a
+              >
+            </li>
+          </ul>
         </li>
         <li>
           <a href="/periodistas-amenazadas/informe/#/seccionEncuestadas"

diff --git a/src/components/informe/item-slider/encuestadas/graph.astro b/src/components/informe/item-slider/encuestadas/graph.astro
@@ -2,7 +2,7 @@
 
 ---
 
-<section id="sectionImpacto" class="r-stretch">
+<section id="seccionImpactoGraph" class="r-stretch">
   <div id="graficoImpacto"></div>
 </section>
 <script>
@@ -30,7 +30,7 @@
   };
 
   const initGraph = () => {
-    const section = document.getElementById("sectionImpacto");
+    const section = document.getElementById("seccionImpactoGraph");
     chartDom.style.width = section.offsetWidth + "px";
     chartDom.style.height = section.offsetHeight + "px";
     chart.resize();

diff --git a/src/components/informe/item-slider/mitigacion/grado.astro b/src/components/informe/item-slider/mitigacion/grado.astro
@@ -2,8 +2,8 @@
 
 ---
 
-<section class="r-stretch">
-  <div id="sectionMitigacionGrado" class="w-10/12 h-full m-auto">
+<section id="seccionMitigacionGrado" class="r-stretch">
+  <div id="graphContainerMitigacionGrado" class="w-10/12 h-full m-auto">
     <div id="graficoMitigacionGrado"></div>
   </div>
 </section>
@@ -74,7 +74,7 @@
     ],
   };
   const initGraph = () => {
-    const section = document.getElementById("sectionMitigacionGrado");
+    const section = document.getElementById("graphContainerMitigacionGrado");
     chartDom.style.width = section.offsetWidth + "px";
     chartDom.style.height = section.offsetHeight + "px";
     chart.resize();

diff --git a/src/components/informe/item-slider/mitigacion/impacto.astro b/src/components/informe/item-slider/mitigacion/impacto.astro
@@ -2,8 +2,8 @@
 
 ---
 
-<section class="r-stretch">
-  <div id="sectionMitigacionImpacto" class="w-10/12 h-full m-auto">
+<section id="seccionMitigacionImpacto" class="r-stretch">
+  <div id="graphContainerMitigacionImpacto" class="w-10/12 h-full m-auto">
     <div id="graficoMitigacionImpacto"></div>
   </div>
 </section>
@@ -70,7 +70,7 @@
     ],
   };
   const initGraph = () => {
-    const section = document.getElementById("sectionMitigacionImpacto");
+    const section = document.getElementById("graphContainerMitigacionImpacto");
     chartDom.style.width = section.offsetWidth + "px";
     chartDom.style.height = section.offsetHeight + "px";
     chart.resize();

diff --git a/src/components/informe/item-slider/mitigacion/medidas.astro b/src/components/informe/item-slider/mitigacion/medidas.astro
@@ -3,7 +3,7 @@ import microphoneImage from "../../../../assets/microphone.svg";
 import Background from "../background.astro";
 ---
 
-<section id="sectionMitigacionMedidas" class="r-stretch">
+<section id="seccionMitigacionMedidas" class="r-stretch">
   <Background image={microphoneImage} position="-right-24 -bottom-20" />
   <div id="mitigacion-medidas-container" class="w-10/12 h-full m-auto">
     <div id="graficoMitigacionMedidas"></div>

diff --git a/src/components/informe/item-slider/mitigacion/reaccion.astro b/src/components/informe/item-slider/mitigacion/reaccion.astro
@@ -2,7 +2,7 @@
 
 ---
 
-<section id="sectionMitigacionReaccion" class="r-stretch">
+<section id="seccionMitigacionReaccion" class="r-stretch">
   <div id="graficoMitigacionReaccion" class="w-10/12 h-full m-auto"></div>
 </section>
 <script>
@@ -51,7 +51,7 @@
     ],
   };
   const initGraph = () => {
-    const section = document.getElementById("sectionMitigacionReaccion");
+    const section = document.getElementById("seccionMitigacionReaccion");
     chartDom.style.width = section.offsetWidth + "px";
     chartDom.style.height = section.offsetHeight + "px";
     chart.resize();

diff --git a/src/components/informe/item-slider/violencia/autor.astro b/src/components/informe/item-slider/violencia/autor.astro
@@ -4,7 +4,7 @@ import warningImage from "../../../../assets/warning.svg";
 import { tipoViolencia, datosAutores } from "../../../../utils/constants";
 ---
 
-<section id="sectionViolenciasAutores" class="r-stretch">
+<section id="seccionViolenciasAutores" class="r-stretch">
   <Background image={warningImage} size={600} position="-right-40 -bottom-20" />
 
   <div class="flex w-full h-full justify-center">

diff --git a/src/components/informe/item-slider/violencia/impacto.astro b/src/components/informe/item-slider/violencia/impacto.astro
@@ -2,7 +2,7 @@
 
 ---
 
-<section id="sectionImpacto" class="r-stretch">
+<section id="seccionImpacto" class="r-stretch">
   <div id="graficoImpacto"></div>
 </section>
 <script>
@@ -37,7 +37,7 @@
   };
 
   const initGraph = () => {
-    const section = document.getElementById("sectionImpacto");
+    const section = document.getElementById("seccionImpacto");
     chartDom.style.width = section.offsetWidth + "px";
     chartDom.style.height = section.offsetHeight
       ? section.offsetHeight + "px"

diff --git a/src/components/informe/item-slider/violencia/momentos.astro b/src/components/informe/item-slider/violencia/momentos.astro
@@ -4,7 +4,7 @@ import xImage from "../../../../assets/x.svg";
 import Background from "../background.astro";
 ---
 
-<section id="sectionViolenciasMomento" class="r-stretch">
+<section id="seccionViolenciasMomento" class="r-stretch">
   <Background image={xImage} position="-right-96 -bottom-80" />
   <div id="violencias-momento-container" class="w-10/12 h-full m-auto">
     <div id="graficoViolenciasMomento"></div>

diff --git a/src/components/informe/item-slider/violencia/violencia.astro b/src/components/informe/item-slider/violencia/violencia.astro
@@ -4,7 +4,7 @@ import microphoneImage from "../../../../assets/microphone.svg";
 import Background from "../background.astro";
 ---
 
-<section id="sectionViolenciasViolencia" class="r-stretch">
+<section id="seccionViolenciasViolencia" class="r-stretch">
   <Background image={microphoneImage} position="-right-24 -bottom-20" />
   <div id="violencias-violencia-container" class="w-10/12 h-full m-auto">
     <div id="graficoViolenciasViolencia"></div>

diff --git a/src/components/layout/navbar-slide.astro b/src/components/layout/navbar-slide.astro
@@ -6,8 +6,8 @@ import { Icon } from "astro-icon/components";
 ---
 
 <nav id="navbar" class="border-b-2 border-gray-200 bg-white">
-  <div class="container p-3 mx-auto flex justify-between">
-    <div>
+  <div class="container lg:p-3 mx-auto flex justify-between">
+    <div class="absolute lg:relative top-16 lg:top-0 z-50">
       <a href="/periodistas-amenazadas/" class="flex gap-5">
         <Image
           src={logoPeriodistas}
@@ -16,11 +16,11 @@ import { Icon } from "astro-icon/components";
         />
       </a>
     </div>
-    <div class="md:hidden">
+    <div class="lg:hidden absolute right-0 top-16 z-50">
       <Icon name="mdi:menu" class="text-4xl cursor-pointer menuButton" />
     </div>
     <div
-      class="linkMenu fixed bottom-0 right-0 z-50 w-full h-screen md-w-auto md:h-auto bg-white hidden md:bg-transparent md:relative md:block"
+      class="linkMenu fixed bottom-0 right-0 z-50 w-full h-screen md:w-auto md:h-auto bg-white hidden md:bg-transparent md:relative lg:block"
     >
       <div class="flex justify-end p-5 md:hidden">
         <Icon name="mdi:menu" class="text-4xl cursor-pointer menuButton" />
@@ -61,27 +61,46 @@ import { Icon } from "astro-icon/components";
       </ul>
     </div>
   </div>
-  <div class="border-t-2 py-3 text-gray-500">
+  <div class="border-t-2 text-gray-500">
     <div class="container px-3 mx-auto">
       <ul class="flex justify-between" id="subnavbar">
-        <li><a href="/periodistas-amenazadas/informe/#/"> indice</a></li>
-        <li>
-          <a href="/periodistas-amenazadas/informe/#/seccionViolencia">
+        <li class="py-3 px-3">
+          <a
+            class="links-subnavbar #/"
+            href="/periodistas-amenazadas/informe/#/"
+          >
+            indice</a
+          >
+        </li>
+        <li class="py-3 px-3">
+          <a
+            class="links-subnavbar seccionViolencia"
+            href="/periodistas-amenazadas/informe/#/seccionViolencia"
+          >
             1 Violencia</a
           >
         </li>
-        <li>
-          <a href="/periodistas-amenazadas/informe/#/seccionMitigacion">
+        <li class="py-3 px-3">
+          <a
+            class="links-subnavbar seccionMitigacion"
+            href="/periodistas-amenazadas/informe/#/seccionMitigacion"
+          >
             2 Mitigacion</a
           >
         </li>
-        <li>
-          <a href="/periodistas-amenazadas/informe/#/seccionPercepciones">
+        <li class="py-3 px-3">
+          <a
+            class="links-subnavbar seccionPercepciones"
+            href="/periodistas-amenazadas/informe/#/seccionPercepciones"
+          >
             3 Percepciones</a
           >
         </li>
-        <li>
-          <a href="/periodistas-amenazadas/informe/#/seccionEncuestadas">
+        <li class="py-3 px-3">
+          <a
+            class="links-subnavbar seccionEncuestadas"
+            href="/periodistas-amenazadas/informe/#/seccionEncuestadas"
+          >
             4 Encuestadas</a
           >
         </li>
@@ -90,8 +109,6 @@ import { Icon } from "astro-icon/components";
   </div>
 </nav>
 
-<style></style>
-
 <script>
   const menuButton = document.querySelectorAll(".menuButton");
   menuButton?.forEach((button) => {