Feature: Add hide and expand function on header

This commit is contained in:
winkidney
2019-11-27 14:11:45 +08:00
committed by Isaac Bythewood
parent 8f8e136355
commit aee9e1d217

View File

@@ -8,13 +8,14 @@
</a> </a>
<a role="button" class="navbar-burger burger" <a role="button" class="navbar-burger burger"
aria-label="menu" aria-expanded="false" aria-label="menu" aria-expanded="false"
v-on:click="toggleMenu"
data-target="PinryNav"> data-target="PinryNav">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
<div id="PinryNav" class="navbar-menu"> <div id="PinryNav" class="navbar-menu" :class="{ 'is-active': active}">
<div class="navbar-start"> <div class="navbar-start">
<a class="navbar-item"> <a class="navbar-item">
BookmarkLet BookmarkLet
@@ -57,6 +58,17 @@
<script> <script>
export default { export default {
name: 'p-header', name: 'p-header',
data() {
return {
active: false,
};
},
methods: {
toggleMenu() {
console.log(this.active);
this.active = !this.active;
},
},
}; };
</script> </script>