siblinghood/scripts/nav.js

/* Nav construction */
const cards = [
  {
    title: "card one",
    href: "/card-one/"
  },
  {
    title: "card two",
    href: "/card-two/"
  }
]

const constructMenuLink = function(title, href) {
  const path = window.location.pathname;

  const a = document.createElement("a");
  a.href = href;
  a.title = title;
  a.innerHTML = title;
  if (path === href) a.id = "current-page";

  return a;
}

const constructSkipLink = function() {
  const a = constructMenuLink("skip to main", "#main");
  a.id = "skip";

  return a;
}

const constructDropdown = function() {
  const div = document.createElement("div");
  div.id = "dropdown";

  const button = document.createElement("button");
  button.innerHTML = "cards ⮷";
  button.id="drop-button";
  button.ariaLabel = "card submenu";
  button.ariaExpanded = "false";
  button.type = "button";
  button.setAttribute("aria-controls", "drop-content");
  div.append(button);

  const ul = document.createElement("ul");
  ul.id = "drop-content";
  ul.ariaHidden = "true";

  for (const card of cards) {
    const li = document.createElement("li");
    li.append(constructMenuLink(card.title, card.href));
    ul.append(li);
  }

  div.append(ul);
  return div;
}

const constructNav = function() {
  const nav = document.getElementById("top-nav");
  nav.append(constructSkipLink());
  nav.append(constructMenuLink("home", "/"));
  nav.append(constructDropdown());
}

constructNav();

/* Dropdown handling */

const dropdown = document.getElementById("dropdown");
const dropdownButton = document.getElementById("drop-button");
const dropdownContent = document.getElementById("drop-content");

const dropdownItems = dropdownContent.querySelectorAll("a");
const firstDropdownItem = dropdownItems[0];
const lastDropdownItem = dropdownItems[dropdownItems.length - 1];

const openDropdown = function() {
  dropdownContent.classList.add("show"); 
  dropdownContent.setAttribute("aria-hidden", "false");
  dropdownButton.setAttribute("aria-expanded", "true");
}

const closeDropdown = function() {
  if (dropdownButton.ariaExpanded === "true") {
    dropdownContent.classList.remove("show");
    dropdownContent.setAttribute("aria-hidden", "true");
    dropdownButton.setAttribute("aria-expanded", "false");
  }
}

dropdownButton.addEventListener("click", (event) => {
  if (dropdownButton.ariaExpanded === "false") openDropdown();
  else closeDropdown();
});

dropdownButton.addEventListener("keydown", (event) => {
  if (event.key === "Enter" || event.key === " ") { // Space or Enter key
    event.preventDefault(); // Prevent the default action to stop scrolling when pressing Space
    if (dropdownButton.ariaExpanded === "false") {
      openDropdown();
    } else {
      closeDropdown();
    }
  }
});

firstDropdownItem.addEventListener("keydown", (event) => {
  if (event.key === "Tab" && event.shiftKey) closeDropdown();
});

lastDropdownItem.addEventListener("keydown", (event) => {
  if (event.key === "Tab" && !event.shiftKey) closeDropdown();
});

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    closeDropdown();
    dropdownButton.focus();
  }
});

window.addEventListener("click", (event) => {
  if (!event.target.matches("#drop-button")) closeDropdown();
});

/* footer */

let footerHTML = "<p>brought to you in 2026</p>";
document.getElementById("footer").innerHTML = footerHTML;