<template>
<header class="headerComponent">
<Logo />
<a-button :type="isMenuOpen ? 'primary' : 'danger'"
@click="menuToggle"
>Open</a-button
>
<client-only>
<Slide
:key="componentKey"
id="menu"
right
:closeOnNavigation="true"
:crossIcon="false"
:isOpen="Boolean(isMenuOpen)"
:burgerIcon="isMenuOpen"
>
<!-- :burgerIcon="false" -->
<nuxt-link to="/">
<span>Home</span>
</nuxt-link>
</Slide>
</client-only>
</header>
</template>
<script>
export default {
data: () => {
return {
isMenuOpen: false,
componentKey: 0
};
},
methods: {
menuToggle() {
this.isMenuOpen = !this.isMenuOpen;
// setTimeout(() => this.forceRerender());
}
// forceRerender() {
// this.componentKey += 1;
// }
},
watch: {
isMenuOpen: function(value) {
console.log("Text edited: ", value);
}
}
};
</script>