chore: Update navbar links to include section IDs

DemocraciaEnRed · Jun 13, 2024 · c0a2d33 · c0a2d33
1 parent 5876a80
commit c0a2d33
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -55,22 +55,22 @@
         </div>
 
         <div class="navbar-end">
-          <a class="navbar-item">
+          <a class="navbar-item" href="#campania">
             CAMPAÑA
           </a>
-          <a class="navbar-item">
+          <a class="navbar-item" href="#contexto">
             CONTEXTO
           </a>
-          <a class="navbar-item">
+          <a class="navbar-item" href="#riesgos">
             RIESGOS
           </a>
-          <a class="navbar-item">
+          <a class="navbar-item" href="#casos">
             CASOS
           </a>
-          <a class="navbar-item">
+          <a class="navbar-item" href="#objetivos">
             OBJETIVOS
           </a>
-          <a class="navbar-item">
+          <a class="navbar-item" href="#contacto">
             CONTACTO
           </a>
         </div>
@@ -201,6 +201,7 @@ <h2 class="title">RIESGO #3</h2>
       </div>
     </div>
   </section>
+  <div id="casos"></div>
   <section id="casos-desktop" class="has-background-white is-hidden-touch">
     <div class="hero-title">
       <img src="./assets/comun-title-desktop.svg" class="image the-title" alt="¿Qué tienen en común">
@@ -277,6 +278,7 @@ <h2 class="title">¿POR QUÉ HACEMOS ESTA CAMPAÑA?</h2>
       </div>
     </div>
   </div>
+  <div id="mascara"></div>
   <div id="mascara-desktop" class="has-background-black has-text-white">
     <img src="./assets/mascara.jpg" class="image" alt="Imprimí tu máscara">
     <div class="container">
@@ -305,7 +307,7 @@ <h2 class="title">IMPRIMÍ<br>TU MÁSCARA</h2>
     </div>
     <img src="./assets/mascara.jpg" class="image" alt="Imprimí tu máscara">
   </div>
-  <div id="contactanos" class="py-6 has-background-white">
+  <div id="contacto" class="py-6 has-background-white">
     <div class="section">
       <div class="content">
         <img src="./assets/contact-desktop.svg" class="image mx-auto" alt="">

diff --git a/script.js b/script.js
@@ -8,4 +8,19 @@ $(document).ready(function() {
       $(".navbar-menu").toggleClass("is-active");
       $(".navbar").toggleClass("is-open");
   });
+
+  // if they click on a navbar-item, close the navbar
+  $(".navbar-item").click(function() {
+    $(".navbar-burger").removeClass("is-active");
+    $(".navbar-menu").removeClass("is-active");
+    $(".navbar").removeClass("is-open");
+  });
+
+  // Make a function that when I click a section link, the site scrolls to that section
+  $(".navbar-item").click(function() {
+    var section = $(this).attr("href");
+    $("html, body").animate({
+      scrollTop: $(section).offset().top - ($(".navbar").height() + 20)
+    }, 1000);
+  });
 });