From aee9e1d2179d42d7706920fb0f30c0e8070011b2 Mon Sep 17 00:00:00 2001
From: winkidney <winkidney@gmail.com>
Date: Wed, 27 Nov 2019 14:11:45 +0800
Subject: [PATCH] Feature: Add hide and expand function on header

---
 pinry-spa/src/components/PHeader.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

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