Mega menu navigation with opening on hover submenu

html

<div class="columns small-4 small-offset-2">
  <ul class="navigation-overlay-menu__primary">
    <li class="navigation-overlay-menu__primary__item" data-submenu="fleet">
      <a href="#" class="text-wrap animate-bottom-right">
        <h4 class="h4">Fleet</h4>
      </a>
      <div class="arrow-forward-wrapper">{{>arrow-forward }}</div>
    </li>
    <li class="navigation-overlay-menu__primary__item" data-submenu="personnel">
      <a href="#" class="text-wrap animate-bottom-right">
        <h4 class="h4">Personnel</h4>
      </a>
      <div class="arrow-forward-wrapper">{{>arrow-forward }}</div>
    </li>
    <li class="navigation-overlay-menu__primary__item" data-submenu="load-management">
      <a href="#" class="text-wrap animate-bottom-right">
        <h4 class="h4">Load Management</h4>
      </a>
      <div class="arrow-forward-wrapper">{{>arrow-forward }}</div>
    </li>
    <li class="navigation-overlay-menu__primary__item" data-submenu="billing">
      <a href="#" class="text-wrap animate-bottom-right">
        <h4 class="h4">Billing</h4>
      </a>
      <div class="arrow-forward-wrapper">{{>arrow-forward }}</div>
    </li>
    <li class="navigation-overlay-menu__primary__item" data-submenu="payroll">
      <a href="#" class="text-wrap animate-bottom-right">
        <h4 class="h4">Payroll</h4>
      </a>
      <div class="arrow-forward-wrapper">{{>arrow-forward }}</div>
    </li>
    <li class="navigation-overlay-menu__primary__item" data-submenu="reports">
      <a href="#" class="text-wrap animate-bottom-right">
        <h4 class="h4">Reports</h4>
      </a>
      <div class="arrow-forward-wrapper">{{>arrow-forward }}</div>
    </li>
  </ul>
</div>

<style>
   .navigation-overlay-menu {
      position: relative;

      .text-wrap {
        text-decoration: none;
        color: #fff;
        display: inline-block;
        padding-right: 32.5px;
        position: relative;
        z-index: 1;
        padding-bottom: 10px;
        pointer-events: none;

        &.animate-bottom-right {
          &::after {
            left: 0;
            width: 40px;
            bottom: 0;
          }

          &::before {
            height: 0;
            bottom: 0;
          }
        }
      }

      &__secondary {
        background-color: transparent;
        font-size: 0;
        height: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity, height, 0.6s ease-in-out;

        &.show {
          height: auto;
          opacity: 1;
          transition: opacity, height, 0.6s ease-in-out;
        }

        &__item {
          padding: 10px 0 0;
          position: relative;

          &>a {
            text-decoration: none;
            color: $primary;
            display: inline-block;
            padding-right: 32.5px;
            position: relative;
            z-index: 1;
            padding-bottom: 10px;
            pointer-events: none;

            &.animate-bottom-right {
              &::after {
                left: 0;
                width: 40px;
                bottom: 0;
              }

              &::before {
                height: 0;
                bottom: 0;
              }
            }
          }

          &:hover {
            cursor: pointer;

            a {
              &::before {
                height: 50%;
                background-color: rgba($primary, 0.3);
                transition: height 0.6s ease-out 0.5s;
              }

              &::after {
                width: 100%;
                background-color: rgba($primary, 0.3);
                transition: width, 0.4s ease-out 0s;
              }
            }
          }

          .arrow-back-wrapper {
            display: none;
            width: 9px;
            height: 15px;
            padding-right: 0;

            .arrow-back {
              padding-right: 0;
            }
          }

          .h5 {
            color: inherit;
          }

          &+& {
            padding-top: 20px;
          }
        }
      }

      &__primary {
        background: rgba(#fff, 0.7);
        font-size: 0;
        margin-top: 40px;

        .h4 {
          color: $primary;
          font-weight: 500;
        }

        &__item {
          position: relative;
          z-index: 10;
          padding: 10px 0 0;

          &:hover {
            cursor: pointer;
            // background-color: $primary;

            .text-wrap {
              &::before {
                height: 50%;
                background-color: rgba($primary, 0.3);
                transition: height 0.6s ease-out 0.5s;
              }

              &::after {
                width: 100%;
                background-color: rgba($primary, 0.3);
                transition: width, 0.4s ease-out 0s;
              }
            }

            .arrow-forward-wrapper {
              .arrow-forward {
                svg {
                  transition: fill 0.5s ease-in;
                  fill: #fff;
                }
              }
            }
          }

          &+& {
            padding-top: 25px;
          }

          .h3 {
            color: inherit;
            position: relative;
            z-index: 1;
          }

          .arrow-forward-wrapper {
            right: 0;
            position: absolute;
            top: 40%;
            transform: translateY(-50%);

            .arrow-forward {
              width: 9px;
              height: 15px;

              svg {
                transition: fill 0.5s ease-in;
                fill: $primary;
              }
            }
          }

          &.active {

            a {
              background-color: transparent;
              color: $primary;

              &.animate-bottom-right {
                &::before {
                  height: 50%;
                  background-color: rgba($primary, 0.3);
                  transition: height 0.6s ease-out 0.5s;
                }

                &::after {
                  width: 100%;
                  transition: width 0.5s ease-out 0s;
                }
              }
            }

            .arrow-forward-wrapper {
              .arrow-forward {
                svg {
                  transition: fill 0.5s ease-in;
                  fill: #fff;
                }
              }
            }
          }
        }

        &.active {
          .navigation-overlay-menu {
            &__primary {
              &__item {
                padding-top: 10px;
              }
            }
          }
        }
      }
    }
</style>

<script>

    function isSecondLevelHovered(secondLevelMenu) {
      if (secondLevelMenu !== undefined) {
        return (secondLevelMenu.parentElement.querySelector(':hover') === secondLevelMenu);
      }
      return false;
    }
  
    function isTabletDown() {
      let tabletDown = window.matchMedia('(max-width: 960px)');
      return tabletDown.matches;
    }
  
    function clearActiveNavigationItem() {
      let currentActivePrimaryItem = document.querySelector('.navigation-overlay-menu__primary__item.active');
      if (currentActivePrimaryItem !== null) {
        currentActivePrimaryItem.classList.remove('active');
      }
    }
  
    function closeSecondLevelMenu() {
      let activeSubmenu = document.querySelectorAll('.navigation-overlay-menu__secondary.show');
      if (activeSubmenu.length > 0) {
        activeSubmenu.forEach((curr) => {
          curr.classList.remove('show');
        });
      }
    }
  
    function secondLevelShow(time = 300) {
      // eslint-disable-next-line prefer-const
      let item = document.querySelector('.navigation-overlay-menu__primary__item.active');
      setTimeout(() => {
        const searchFor = item.dataset.submenu;
        // eslint-disable-next-line prefer-const
        closeSecondLevelMenu();
        if (searchFor !== undefined) {
          const submenu = document.querySelector(`.navigation-overlay-menu__secondary[data-belongs='${searchFor}']`);
          if (submenu) {
            submenu.classList.add('show');
          }
        }
      }, time);
    }
  
    if (navigationPrimary != null) {
      navigationPrimary.addEventListener('mouseenter', () => {
        isHoveredPrimary = true;
      });
  
      navigationPrimary.addEventListener('mouseleave', () => {
        isHoveredPrimary = false;
        if (navigationSecondary !== null) {
          setTimeout(() => {
            if (!isSecondLevelHovered(navigationSecondary)) { // nothing hovered
              let isTabletDownVariable = isTabletDown();
              if (!isTabletDownVariable) {
                const isHoveredItem = isSecondLevelHovered(navigationSecondary);
                if (!isHoveredItem) {
                  const currentActiveSubmenuItem = document.querySelector('.navigation-overlay-menu__secondary.show');
                  if (currentActiveSubmenuItem) {
                    currentActiveSubmenuItem.classList.remove('show');
                  } else {
                    clearActiveNavigationItem();
                  }
                }
              }
            }
          }, 300);
        }
      });
    }
  
    if (navigationSecondary != null) {
      let isTabletDownVariable = isTabletDown();
      if (!isTabletDownVariable) {
        navigationSecondary.addEventListener('mouseleave', () => {
          if (!isHoveredPrimary) { // primary navigation is no more hovered
            setTimeout(() => {
              const currentActive = document.querySelector('.navigation-overlay-menu__secondary.show');
              if (currentActive !== null) {
                currentActive.classList.remove('show');
                if (!isHoveredPrimary) {
                  clearActiveNavigationItem();
                }
              }
            }, 300);
          }
        });
      }
    }
  
    if (navigationItems != null) {
      navigationItems.forEach((item) => {
        item.addEventListener('mouseenter', () => {
          let isTabletDownVariable = isTabletDown();
          if (!isTabletDownVariable) {
            clearActiveNavigationItem();
            item.classList.add('active');
            secondLevelShow();
          }
        });
  
        item.addEventListener('click', () => {
          let isTabletDownVariable = isTabletDown();
          if (isTabletDownVariable) {
            clearActiveNavigationItem();
            // eslint-disable-next-line prefer-const
            item.classList.toggle('active');
            item.parentElement.classList.toggle('active');
            if (item.classList.contains('active')) {
              secondLevelShow(50);
            } else {
              closeSecondLevelMenu();
            }
          }
        });
  
        item.addEventListener('mouseleave', () => {
          let isTabletDownVariable = isTabletDown();
          if (!isTabletDownVariable) {
            setTimeout(() => {
              if (!isSecondLevelHovered(navigationSecondary)) {
                closeSecondLevelMenu();
              }
            }, 300);
          }
        });
      });
    }
</script>>