script.js

(() => {
  "use strict";

  const sidebar = document.getElementById("sidebar");
  const toggle = document.getElementById("sidebarToggle");
  const navLinks = document.querySelectorAll(".nav-link");
  const sections = document.querySelectorAll("main .section");
  const emailLink = document.getElementById("emailLink");

  const closeSidebar = () => {
    sidebar.classList.remove("is-open");
    toggle.setAttribute("aria-expanded", "false");
    document.body.classList.remove("no-scroll");
  };

  const openSidebar = () => {
    sidebar.classList.add("is-open");
    toggle.setAttribute("aria-expanded", "true");
    document.body.classList.add("no-scroll");
  };

  toggle.addEventListener("click", () => {
    if (sidebar.classList.contains("is-open")) {
      closeSidebar();
      return;
    }

    openSidebar();
  });

  navLinks.forEach((link) => {
    link.addEventListener("click", () => {
      if (sidebar.classList.contains("is-open")) {
        closeSidebar();
      }
    });
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape" && sidebar.classList.contains("is-open")) {
      closeSidebar();
      toggle.focus();
    }
  });

  if (emailLink && navigator.clipboard?.writeText) {
    const label = emailLink.querySelector(".link-label");
    const originalText = label?.textContent ?? "email";
    let revertTimer;

    emailLink.addEventListener("click", (event) => {
      event.preventDefault();

      navigator.clipboard.writeText(emailLink.dataset.email).then(
        () => {
          if (!label) {
            return;
          }

          clearTimeout(revertTimer);
          label.textContent = "copied!";
          emailLink.classList.add("is-copied");

          revertTimer = setTimeout(() => {
            label.textContent = originalText;
            emailLink.classList.remove("is-copied");
          }, 1500);
        },
        () => {
          window.location.href = emailLink.href;
        }
      );
    });
  }

  if (!("IntersectionObserver" in window) || !sections.length) {
    return;
  }

  const setActive = (id) => {
    navLinks.forEach((link) => {
      link.classList.toggle("is-active", link.dataset.section === id);
    });
  };

  const syncBottomSection = () => {
    const scrollBottom = window.scrollY + window.innerHeight;
    const pageBottom = document.documentElement.scrollHeight;

    if (pageBottom - scrollBottom <= 4) {
      const lastSection = sections[sections.length - 1];
      if (lastSection) {
        setActive(lastSection.id);
      }
    }
  };

  const observer = new IntersectionObserver(
    (entries) => {
      const visible = entries
        .filter((entry) => entry.isIntersecting)
        .sort((a, b) => b.intersectionRatio - a.intersectionRatio);

      if (visible.length) {
        setActive(visible[0].target.id);
      }
    },
    {
      rootMargin: "-40% 0px -55% 0px",
      threshold: [0, 0.25, 0.5, 1]
    }
  );

  sections.forEach((section) => observer.observe(section));
  window.addEventListener("scroll", syncBottomSection, { passive: true });
  window.addEventListener("resize", syncBottomSection);
  syncBottomSection();
})();