<template>
  <nav class="navbar is-info">
    <div class="navbar-brand">
      <p class="navbar-item is-size-4"><slot name="title">...</slot></p>
      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
         @click="switchMobileVisibility">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div id="menu" class="navbar-menu" :class="{'is-active': showOnMobile }">
      <div class="navbar-end">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">Autres</a>
        <div class="navbar-dropdown is-right" @click="switchMobileVisibility">
          <slot name="links">
          <a class="navbar-item">History of Loot</a>
          </slot>
        </div>
      </div>
      </div>
    </div>
  </nav>
</template>

<script>
    export default {
        data () { return { showOnMobile: false } },
        methods: {
            switchMobileVisibility () {
                this.showOnMobile = !this.showOnMobile
            }
        }
    }
</script>
