New Navigation & Ask Jen Feedback

network-api/networkapi/templates/fragments/buyersguide/ask_jen_advice_section.html

@@ -14,7 +14,7 @@
             
             <p class="tw-text-base">
                 {% blocktrans %}
-                    Have a question you want to ask? <a href="https://mozillafoundation.typeform.com/ask-jen" class="tw-underline tw-text-blue-80">Submit it here!</a>
+                    Have a question you want to ask? <a target="_blank" href="https://mozillafoundation.typeform.com/ask-jen" class="tw-underline tw-text-blue-80">Submit it here!</a>
                 {% endblocktrans %}
             </p>
         </div>

source/js/buyers-guide/search/member-functions.js

@@ -208,10 +208,10 @@ export function setupReviewLinks(instance) {
     nav.addEventListener("click", (evt) => {
       const editorialContent = document.querySelector(".editorial-content");
       const burger = document.querySelector(".burger");
-
       if (editorialContent) {
         evt.preventDefault();
         evt.stopPropagation();
+        nav.classList.add("active");
         location.hash = "product-review";
         editorialContent.classList.add("tw-hidden");
         if (burger && burger.classList.contains("menu-open")) {

source/js/buyers-guide/search/search-filter.js

@@ -37,8 +37,12 @@ export class SearchFilter {
 
     if (location.hash && location.hash === "#product-review") {
       const editorialContent = document.querySelector(".editorial-content");
+      const navLinks = document.querySelectorAll(`.product-review-link`);
       if (editorialContent) {
         editorialContent.classList.add("tw-hidden");
+        for (const nav of navLinks) {
+          nav.classList.add("active");
+        }
       }
     }
 

source/sass/components/primary-nav.scss

@@ -38,9 +38,11 @@
 
     &.pni-nav-link {
       text-decoration: none;
+      &.active,
       &:hover {
         text-decoration: wavy $pni-wavy-blue 2px underline;
         text-underline-offset: 0.5rem;
+        color: $dark-blue;
       }
     }