37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<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>
|