document.addEventListener('DOMContentLoaded', function () {
  const triggerDiv = document.querySelector('.menu-trigger');
  const expandableDiv = document.querySelector('.nav');
  const moveLeftElements = document.getElementsByClassName('move-left');
  const textElements = document.getElementsByClassName('fade');
  const navPointElements = document.querySelectorAll('.nav-point');
  const menuCloseDelay = expandableDiv.getAttribute('data-delay') || 0;
  let isOpen = false;

  // Function to calculate dynamic viewport height
  function updateViewportHeight() {
    const dynamicHeight = window.innerHeight;
    expandableDiv.style.height = `${dynamicHeight}px`;
  }

  // Initialize
  updateViewportHeight();
  
  window.addEventListener('resize', updateViewportHeight);

  // Initialize elements
  for (let element of moveLeftElements) {
    element.style.transform = 'translateX(-50px)';
  }

  for (let text of textElements) {
    text.style.opacity = '0';
  }

  // Function to close the menu
  function closeMenu() {
    setTimeout(() => {
      expandableDiv.style.height = '0px';
    }, menuCloseDelay);

    for (let element of moveLeftElements) {
      const delay = element.getAttribute('data-delay') || 0;
      setTimeout(() => {
        element.style.transform = 'translateX(-50px)';
      }, delay);
    }

    for (let text of textElements) {
      const delay = text.getAttribute('data-delay') || 0;
      setTimeout(() => {
        text.style.opacity = '0';
      }, delay);
    }

    document.body.classList.remove('no-scroll');
    isOpen = false;
  }

  // Toggle menu
  triggerDiv.addEventListener('click', () => {
    if (isOpen) {
      closeMenu();
    } else {
      updateViewportHeight(); // Update height on toggle open
      for (let element of moveLeftElements) {
        const delay = element.getAttribute('data-delay') || 0;
        setTimeout(() => {
          element.style.transform = 'translateX(0)';
        }, delay);
      }

      for (let text of textElements) {
        const delay = text.getAttribute('data-delay') || 0;
        setTimeout(() => {
          text.style.opacity = '1';
        }, delay);
      }

      document.body.classList.add('no-scroll');
      isOpen = true;
    }
  });

  // Close menu when a nav-point is clicked
  navPointElements.forEach((navPoint) => {
    navPoint.addEventListener('click', () => {
      if (isOpen) {
        closeMenu();
      }
    });
  });
});