navMenu.js

function openNearestArrow(element: HTMLAnchorElement | null) {
  if (!element) return;
  const nearestArrow = element.querySelector(".nav-arrow");
  gsap.to(nearestArrow, {
    rotate: 180,
    duration: 0.3,
    ease: "power3.out",
  });
}

function closeNearestArrow(element: HTMLAnchorElement | null) {
  if (!element) return;
  const nearestArrow = element.querySelector(".nav-arrow");
  gsap.to(nearestArrow, {
    rotate: 0,
    duration: 0.3,
    ease: "power3.out",
  });
}

function closeAllArrows() {
  dropdowns.forEach((dropdown) => {
    closeNearestArrow(dropdown);
  });
}

const openContentWrapper = gsap.timeline({
  paused: true,
  defaults: { duration: 0.3, ease: "power3.out" },
});

openContentWrapper
  .fromTo(
    dropdownContentWrapper,
    {
      y: "-50rem",
      display: "none",
      paddingTop: "5rem",
      opacity: 1,
    },
    {
      opacity: 1,
      y: 0,
      paddingTop: "5rem",
      duration: 0.3,
      display: "block",
      ease: "power3.out",
    },
    0
  )
  .to(
    logo,
    {
      fill: "#3E76F9",
      duration: 0.3,
      ease: "power3.out",
    },
    0
  )
  .to(
    navLinks,
    {
      color: "#000",
      duration: 0.3,
      ease: "power3.out",
    },
    0
  )
  .to(
    navArrows,
    {
      stroke: "#000",
      duration: 0.3,
      ease: "power3.out",
    },
    0
  )
  .to(
    loginButton,
    {
      color: "#000",
      borderColor: "#000",
      duration: 0.3,
      ease: "power3.out",
    },
    0
  )
  .to(
    nav,
    {
      borderBottom: "1px solid #f2f3f8",
      duration: 0,
    },
    0
  );

function closeDropdownContentWrapper() {
  openContentWrapper.reverse();
}


function openNavMenu(menu: HTMLDivElement | null) {
  if (menu === null) return;
  closeAllArrows();
  const fadeInDelay = 0.15;
  const fadeInDuration = 0.3;

  if (menu === learnDropdownContent) {
    if (previousMenu !== null) openContentWrapper.revert();
    if (previousMenu === learnDropdownContent) return;
    gsap.set(featuresDropdownContent, { display: "none" });
    gsap.set(aboutDropdownContent, { display: "none" });
    openNearestArrow(learnDropdownLink);
    openLearnDropdown();
    previousMenu = menu;
  }

  if (menu === featuresDropdownContent) {
    openNearestArrow(featuresDropdownLink);
    if (previousMenu === null || previousMenu === learnDropdownContent) {
      if (previousMenu === learnDropdownContent) {
        closeLearnDropdown();
        // set timeout for 0.3 seconds before opening the features dropdown
        setTimeout(() => {
          openContentWrapper.restart();
          gsap.set(aboutDropdownContent, { display: "none" });
          gsap.fromTo(
            menu,
            {
              display: "flex",
              opacity: 0,
              x: -20,
            },
            {
              opacity: 1,
              x: 0,
              duration: fadeInDuration,
              delay: fadeInDelay,
              ease: "power1.easeOut",
              onComplete: () => {
                previousMenu = menu;
              },
            }
          );
        }, 300);
      }
      if (previousMenu === null) {
        openContentWrapper.restart();
        gsap.set(aboutDropdownContent, { display: "none" });
        gsap.fromTo(
          menu,
          {
            display: "flex",
            opacity: 0,
            x: -20,
          },
          {
            opacity: 1,
            x: 0,
            duration: fadeInDuration,
            delay: fadeInDelay,
            ease: "power1.easeOut",
            onComplete: () => {
              previousMenu = menu;
            },
          }
        );
      }
    }

    if (previousMenu === featuresDropdownContent) {
      return;
    }

    if (previousMenu === aboutDropdownContent) {
      gsap.to(aboutDropdownContent, {
        opacity: 0,
        x: -20,
        duration: fadeInDuration,
        display: "none",
        onStart: () => {
          previousMenu = menu;
        },
        ease: "power3.out",
        onComplete: () => {
          gsap.fromTo(
            menu,
            {
              display: "flex",
              opacity: 0,
              x: -20,
            },
            {
              opacity: 1,
              x: 0,
              duration: fadeInDuration,
              delay: fadeInDelay,
              ease: "power1.easeOut",
              onStart: () => {
                gsap.set(aboutDropdownContent, { display: "none" });
              },
              onComplete: () => {
                previousMenu = menu;
              },
            }
          );
        },
      });
    }
  }

  if (menu === aboutDropdownContent) {
    openNearestArrow(aboutDropdownLink);
    if (previousMenu === null) {
      openContentWrapper.restart();
      gsap.set(featuresDropdownContent, { display: "none" });
      gsap.fromTo(
        menu,
        {
          display: "flex",
          opacity: 0,
          x: -20,
        },
        {
          opacity: 1,
          x: 0,
          duration: fadeInDuration,
          delay: fadeInDelay,
          ease: "power1.easeOut",
          onComplete: () => {
            previousMenu = menu;
          },
        }
      );
    }
    if (previousMenu === aboutDropdownContent) {
      gsap.set(featuresDropdownContent, { display: "none" });
      return;
    }

    if (previousMenu === learnDropdownContent) {
      closeLearnDropdown();
      setTimeout(() => {
        openContentWrapper.restart();
        gsap.set(featuresDropdownContent, { display: "none" });
        gsap.fromTo(
          menu,
          {
            display: "flex",
            opacity: 0,
            x: -20,
          },
          {
            opacity: 1,
            x: 0,
            duration: fadeInDuration,
            delay: fadeInDelay,
            ease: "power1.easeOut",
            onComplete: () => {
              previousMenu = menu;
            },
          }
        );
      }, 300);
    }

    if (previousMenu === featuresDropdownContent) {
      gsap.to(featuresDropdownContent, {
        opacity: 0,
        x: -20,
        duration: fadeInDuration,
        display: "none",
        onStart: () => {
          previousMenu = menu;
        },
        onComplete: () => {
          gsap.fromTo(
            menu,
            {
              display: "flex",
              opacity: 0,
              x: -20,
            },
            {
              opacity: 1,
              x: 0,
              duration: fadeInDuration,
              delay: fadeInDelay,
              onStart: () => {
                gsap.set(featuresDropdownContent, { display: "none" });
              },
              onComplete: () => {
                previousMenu = menu;
              },
              ease: "power1.easeOut",
            }
          );
        },
        ease: "power3.out",
      });
    }
  }
}
function closeNavMenu(menu: HTMLDivElement | null) {
  if (menu === null) return;
  closeAllArrows();
  if (menu === featuresDropdownContent) {
    gsap.to(featuresDropdownContent, {
      opacity: 0,
      x: -20,
      duration: 0.2,
      display: "none",
      ease: "power3.out",
      onComplete: () => {
        previousMenu = null;
        openContentWrapper.reverse();
      },
    });
  }
  if (menu === aboutDropdownContent) {
    gsap.to(aboutDropdownContent, {
      opacity: 0,
      x: -20,
      duration: 0.2,
      display: "none",
      ease: "power3.out",
      onComplete: () => {
        previousMenu = null;
        openContentWrapper.reverse();
      },
    });
  }
  if (menu === learnDropdownContent) {
    closeLearnDropdown();
    previousMenu = null;
  }
}

export default function desktopNavigation() {
  dropdowns.forEach((dropdown) => {
    dropdown?.addEventListener(
      "click",
      debounce((e: any) => {
        e.preventDefault();
        if (dropdown === featuresDropdownLink) {
          if (previousMenu === featuresDropdownContent) {
            closeNavMenu(featuresDropdownContent);
            return;
          }
          openNavMenu(featuresDropdownContent);
        }

        if (dropdown === aboutDropdownLink) {
          if (previousMenu === aboutDropdownContent) {
            closeNavMenu(aboutDropdownContent);
            return;
          }
          openNavMenu(aboutDropdownContent);
        }

        if (dropdown === learnDropdownLink) {
          if (previousMenu === learnDropdownContent) {
            closeNavMenu(learnDropdownContent);
            return;
          }
          openNavMenu(learnDropdownContent);
        }
      }, 315)
    );

    dropdown?.addEventListener(
      "mouseenter",
      debounce((e: any) => {
        e.preventDefault();

        if (dropdown === featuresDropdownLink) {
          openNavMenu(featuresDropdownContent);
        }

        if (dropdown === aboutDropdownLink) {
          openNavMenu(aboutDropdownContent);
        }

        if (dropdown === learnDropdownLink) {
          openNavMenu(learnDropdownContent);
        }
      }, 315)
    );

    document.addEventListener(
      "click",
      debounce((e: any) => {
        if (
          !dropdownContentWrapper?.contains(e.target) &&
          !nav?.contains(e.target)
        ) {
          closeAllArrows();
          closeFeaturesDropdown();
          closeAboutDropdown();
          closeLearnDropdown();
          closeDropdownContentWrapper();
          previousMenu = null;
        }
      }, 315)
    );
  });

  window.addEventListener("resize", () => {
    if (window.innerWidth < 992) {
      openContentWrapper.reverse();
      closeAllArrows();
      gsap.set(featuresDropdownContent, { clearProps: "all" });
      gsap.set(aboutDropdownContent, { clearProps: "all" });
      gsap.set(learnDropdownContent, { clearProps: "all" });
    }
  });
}