<template>
  <div @mouseenter="show = true" @mouseleave="show = false">
    <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>
export default {
  data() {
    return {
      show: false
    };
  },
  props: {
    href: {
      type: String,
    },
    label: {
      type: String,
    }
  },
  methods: {
    handleClick() {
      if (this.$props.href) {
        window.location = this.$props.href;
      }

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