From 52bc6febaa1f8d7cdbad52fb24c2c031cb82f29a Mon Sep 17 00:00:00 2001
From: Peter Stuifzand <peter@stuifzand.eu>
Date: Mon, 18 Apr 2022 14:16:50 +0200
Subject: [PATCH] Problem: menu does not work on mobile

Solution: fix menu
---
 src/App.vue  | 15 +++++++++++----
 src/store.js |  9 ++++++++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 2fe76ad..ad01e38 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,14 +5,13 @@
         <div class="navbar-brand">
           <router-link to="/" class="navbar-item">Ekster</router-link>
 
-          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
+          <a role="button" :class="{'navbar-burger':true,'is-active':menuActive}" aria-label="menu" aria-expanded="false" @click="toggleMenu">
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
             <span aria-hidden="true"></span>
           </a>
-
         </div>
-        <div class="navbar-menu">
+        <div :class="{'navbar-menu':true,'is-active':menuActive}">
           <div class="navbar-end">
             <div class="buttons">
               <button class="button is-light" @click="openSearch">Search</button>
@@ -42,10 +41,18 @@
         this.$store.dispatch('startEventListening', '?action=events')
       }
     },
+    computed: {
+      menuActive() {
+        return this.$store.state.menuActive
+      }
+    },
     methods: {
       openSearch () {
         this.$store.dispatch('openSearch')
-      }
+      },
+      toggleMenu () {
+        this.$store.dispatch('toggleMenu' )
+      },
     }
   }
 </script>
diff --git a/src/store.js b/src/store.js
index 7f74e10..dddec94 100644
--- a/src/store.js
+++ b/src/store.js
@@ -22,7 +22,8 @@ export default new Vuex.Store({
       globalTimeline: {items: []},
       debug: false,
       debugItem: {},
-      debugVisible: false
+      debugVisible: false,
+      menuActive: false,
     };
     let loginData = JSON.parse(window.localStorage.getItem('login_data'))
     if (loginData) {
@@ -156,6 +157,9 @@ export default new Vuex.Store({
     },
     closeDebugPopup(state) {
       state.debugVisible = false
+    },
+    activateMenu(state) {
+      state.menuActive = !state.menuActive
     }
   },
 
@@ -326,5 +330,8 @@ export default new Vuex.Store({
     closeDebug({commit}) {
       return commit('closeDebugPopup')
     },
+    toggleMenu({commit}) {
+      return commit('activateMenu')
+    }
   }
 })