NavbarSubitem.vue

<template>
  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
    <span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
    <a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
    <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
      <slot>
      </slot>
    </div>
  </div>
</template>

<script>
import { isLgScreenSize } from "../../utils";

export default {
  data() {
    return {
      show: false
    };
  },
  props: {
    href: {
      type: String,
    },
    label: {
      type: String,
    }
  },
  methods: {
    onMouseEnter() {
      if (isLgScreenSize()) {
        this.$data.show = true;
      }
    },
    onMouseLeave() {
      if (isLgScreenSize()) {
        this.$data.show = false;
      }
    },
    handleClick(evt) {
      // On mobile screens, first click should just toggle and redir on second one
      if (isLgScreenSize() || this.$data.show) {
        if (this.$props.href) {
          window.location = this.$props.href;
        }
      }

      this.$data.show = !this.$data.show;
    }
  }
}
</script>