hologram-web-library/src/project/super-greens/scripts/header.js

Hologram Web Library components

const Header = (() => ({
  secondarySliderInit: function () {
    const secondarySliders = document.querySelectorAll(".secondary-slider");

    if (secondarySliders.length > 0) {
      secondarySliders.forEach((slider) => {
        const trigger = slider.querySelector(".secondary-slider__trigger");
        const body = slider.querySelector(".secondary-slider__body");
        const backBtn = slider.querySelector(".secondary-slider__back");

        if (trigger && body) {
          trigger.addEventListener("click", function () {
            body.classList.add("open");
          });
          backBtn.addEventListener("click", function () {
            body.classList.remove("open");
          });
        }
      });
    }
  },
  desktopNavigationInit: function () {
    const desktopMenuItems = document.querySelectorAll(".navigation-item");

    const toggleMenuDrop = function (desktopMenuItem) {
      desktopMenuItem.classList.toggle("navigation-item--show");
      desktopMenuItem
        .querySelector(".navigation-item__drop")
        .classList.toggle("navigation-item__drop--show");
    };

    desktopMenuItems.forEach((desktopMenu) => {
      if (desktopMenu) {
        const menuTrigger = desktopMenu.querySelector(
          ".navigation-item__trigger"
        );
        const menuDrop = desktopMenu.querySelector(".navigation-item__drop");

        menuTrigger.addEventListener("mouseenter", function () {
          toggleMenuDrop(desktopMenu);
        });
        menuDrop.addEventListener("mouseenter", function () {
          toggleMenuDrop(desktopMenu);
        });

        menuDrop.addEventListener("mouseleave", function () {
          toggleMenuDrop(desktopMenu);
        });
        menuTrigger.addEventListener("mouseleave", function () {
          toggleMenuDrop(desktopMenu);
        });

        menuTrigger.addEventListener("keydown", function (event) {
          if (event.key === "Enter") {
            toggleMenuDrop(desktopMenu);
          }
        });
        menuDrop.addEventListener("keydown", function (event) {
          if (event.key === "Enter") {
            toggleMenuDrop(desktopMenu);
          }
        });
      }
    });
  },
  mobileNavigationInit: function () {
    const mobileMenu = document.querySelector(".mobile-navigation");
    const mobileMenuOverlay = document.querySelector(
      ".mobile-navigation__overlay"
    );

    const announcementBar = document.querySelector(".announcement-bar");
    const hideAnnouncementBar =
      sessionStorage && sessionStorage.getItem("hideAnnouncementBar");

    if (mobileMenu) {
      const hamburgerMenuIcon = document.querySelector(".hamburger-icon");
      const html = document.querySelector("html");
      const body = document.querySelector("body");

      this.secondarySliderInit();

      const openMobileNav = function () {
        if (mobileMenu.classList.contains("mobile-navigation--open")) {
          mobileMenu.classList.remove("mobile-navigation--open");
          mobileMenuOverlay.classList.add("hidden");
          hamburgerMenuIcon.classList.remove("open");
          body.classList.remove("overflow-hidden");
          html.classList.remove("overflow-hidden");
        } else {
          mobileMenu.classList.add("mobile-navigation--open");
          hamburgerMenuIcon.classList.add("open");
          mobileMenuOverlay.classList.remove("hidden");
          body.classList.add("overflow-hidden");
          html.classList.add("overflow-hidden");
        }
      };

      if (mobileMenuOverlay) {
        mobileMenuOverlay.addEventListener("click", function () {
          mobileMenu.classList.remove("mobile-navigation--open");
          mobileMenuOverlay.classList.add("hidden");
          hamburgerMenuIcon.classList.remove("open");
          body.classList.remove("overflow-hidden");
          html.classList.remove("overflow-hidden");
        });
      }

      if (announcementBar === null || hideAnnouncementBar) {
        mobileMenu.classList.add("!pt-16");
      }

      if (hamburgerMenuIcon) {
        hamburgerMenuIcon.addEventListener("click", openMobileNav);
      }
    }
  },
  stickyHeaderInit: function () {
    let prevScrollPos = window.pageYOffset;
    const header = document.querySelector(".header");

    const scrollThreshold = 200;
    let visibleMenuDrop;

    if (header) {
      window.addEventListener("scroll", () => {
        const currentScrollPos = window.pageYOffset;

        if (
          currentScrollPos < scrollThreshold ||
          prevScrollPos > currentScrollPos
        ) {
          header.classList.remove("header--hide");
          visibleMenuDrop = document.querySelector(
            ".navigation-item.navigation-item-disabled"
          );
          if (visibleMenuDrop) {
            visibleMenuDrop.classList.remove("navigation-item-disabled");
            visibleMenuDrop
              .querySelector(".navigation-item__drop")
              .classList.remove("!hidden");
          }
        } else {
          header.classList.add("header--hide");
          visibleMenuDrop = document.querySelector(".navigation-item--show");
          if (visibleMenuDrop) {
            visibleMenuDrop.classList.add("navigation-item-disabled");
            visibleMenuDrop
              .querySelector(".navigation-item__drop")
              .classList.add("!hidden");
          }
        }

        prevScrollPos = currentScrollPos;
      });
    }
  },
  announcementBarInit: function () {
    const announcementBar = document.querySelector(".announcement-bar");
    const announcementCloseBtn =
      announcementBar &&
      announcementBar.querySelector(".announcement-bar__close");

    const hideAnnouncementBar =
      sessionStorage && sessionStorage.getItem("hideAnnouncementBar");

    if (announcementBar && announcementCloseBtn) {
      announcementCloseBtn.addEventListener("click", function () {
        announcementBar.classList.add("hidden");

        if (sessionStorage) {
          sessionStorage.setItem("hideAnnouncementBar", true);
        }
      });

      if (hideAnnouncementBar) {
        announcementBar.classList.add("hidden");
      }
    }
  },
  init: function () {
    this.announcementBarInit();
    this.stickyHeaderInit();
    this.mobileNavigationInit();
    this.desktopNavigationInit();
  },
}))();

export default Header;