<template>
  <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
    <span class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
    <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() {
      if (this.$props.href) {
        window.location = this.$props.href;
      }

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