//navigation
// main navigation
const mobileBtn = document.querySelector(".mobile-btn");
const nav = document.querySelector(".one-top-nav");
mobileBtn.addEventListener("click", () => {
  nav.classList.toggle("nav-active");
  mobileBtn.classList.toggle("btn-active");
});

mobileBtn.addEventListener("keydown", (e) => {
  if (e.code === "Enter") {
    nav.classList.toggle("nav-active");
    mobileBtn.classList.toggle("btn-active");
  }
});

//sub menu

const parentMenu = document.querySelectorAll(".menu-item-has-children");

parentMenu.forEach((menu) => {
  menu.addEventListener("click", () => {
    const subMenu = menu.childNodes[2];
    subMenu.classList.add("sub-menu-active");
  });
});

// close dropdown when clicked off
const offClick = () => {
  window.addEventListener("click", function (e) {
    if (!e.target.matches(".menu-item-has-children")) {
      const subMenu = document.querySelectorAll(".sub-menu");
      subMenu.forEach((menu, index) => {
        if (menu.classList.contains("sub-menu-active")) {
          menu.classList.remove("sub-menu-active");
        }
      });
    }
  });
};

offClick();

// back to top button
//Get the button
let mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
  scrollFunction();
};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);
mybutton.addEventListener("keydown", backToTop);

function backToTop() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

// Show posts on tab
const cards = document.querySelectorAll(".masonry-entry");
const cardText = document.querySelectorAll(".has-thumbnail .masonry-details");
const thumbs = document.querySelectorAll(".masonry-thumbnail");
cards.forEach((card) => {
  card.addEventListener("keydown", () => {
    //const cardText = card.childNodes[1].childNodes[1];
    cardText.forEach((text) => {
      text.style.display = "block";
    });

    thumbs.forEach((thumb) => {
      thumb.style.opacity = "75%";
    });
  });
});