Megamenu

Megamenu.js

import Vue from "vue";

export default function () {

  new Vue({
    el: '.megamenu',
    data: function () {
      return {
        triggers: null,
        megamenus: null
      }
    },
    mounted: function () {
      this.triggers = document.querySelectorAll('[data-megamenu-trigger]');
      this.megamenus = this.$el.querySelectorAll(`[data-megamenu]`);
      let inner = this.$el.querySelector('.megamenu__inner');

      inner.addEventListener('mouseenter', () => this.onEnterInner());
      inner.addEventListener('mouseleave', () => this.onLeaveInner());

      this.triggers.forEach(trigger => {
        trigger.addEventListener('mouseenter', () => this.onEnterTrigger(trigger));
        trigger.addEventListener('mouseleave', () => this.onLeaveTrigger(trigger));
      });
    },
    methods: {
      onEnterInner: function () {
        this.$el.classList.add('is-active');
      },
      onLeaveInner: function () {
        this.$el.classList.remove('is-active');
        this.triggers.forEach(i => i.classList.remove('is-active'));
      },
      onEnterTrigger: function (trigger) {
        // Desactivate all elements activated
        this.megamenus.forEach(i => i.classList.remove('is-active'));
        this.triggers.forEach(i => i.classList.remove('is-active'));

        let ref = trigger.getAttribute('data-megamenu-trigger');
        let megamenu = document.querySelector(`[data-megamenu=${ref}]`);

        // Activate megamenu elements
        trigger.classList.add('is-active');
        megamenu.classList.add('is-active');
        this.$el.classList.add('is-active');
      },
      onLeaveTrigger: function (trigger) {
        // Will desactivate only when the mouse is out of nav and megamenu
        this.$el.classList.remove('is-active');
      }
    }
  });

}