PresentCorpo/views/servicePages/serviceMain.js

//// views\servicePages\serviceMain.js

// Navigation highlighting
document.addEventListener("DOMContentLoaded", function () {
  // Smooth scrolling for anchor links
  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();

      const targetId = this.getAttribute("href");
      if (targetId === "#") return;

      const targetElement = document.querySelector(targetId);
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 100,
          behavior: "smooth",
        });
      }
    });
  });

  // Animate service cards on scroll
  const serviceCards = document.querySelectorAll(".category-card");

  function animateOnScroll() {
    serviceCards.forEach((card) => {
      const cardPosition = card.getBoundingClientRect().top;
      const screenPosition = window.innerHeight / 1.3;

      if (cardPosition < screenPosition) {
        card.style.opacity = "1";
        card.style.transform = "translateY(0)";
      }
    });
  }

  // Initialize card styles
  serviceCards.forEach((card) => {
    card.style.opacity = "0";
    card.style.transform = "translateY(20px)";
    card.style.transition = "all 0.5s ease";
  });

  // Check on load and scroll
  window.addEventListener("scroll", animateOnScroll);
  animateOnScroll();
});

// SIDEBAR
document.addEventListener("click", function (e) {
  const sidebar = document.getElementById("sidebar");
  const overlay = document.getElementById("sidebarOverlay");
  const floatingMenuBtn = document.getElementById("floatingMenuBtn");

  if (!sidebar) return;

  const isOpenTrigger =
    e.target.closest("#floatingMenuBtn") ||
    e.target.closest(".mobile-menu-btn");
  const isCloseTrigger =
    e.target.closest(".close-sidebar") ||
    e.target.closest("#sidebarOverlay") ||
    e.target.closest(".sidebar-nav .nav-link");

  if (isOpenTrigger) {
    sidebar.classList.add("open");
    overlay.style.display = "block";
    document.body.style.overflow = "hidden";
    floatingMenuBtn.style.display = "none";
  }

  if (isCloseTrigger) {
    sidebar.classList.remove("open");
    overlay.style.display = "none";
    document.body.style.overflow = "";
    floatingMenuBtn.style.display = "flex";
  }
});