Problem: menu does not work on mobile

Solution: fix menu
This commit is contained in:
Peter Stuifzand 2022-04-18 14:16:50 +02:00
parent 3e1695e6f3
commit 52bc6febaa
2 changed files with 19 additions and 5 deletions

View File

@ -5,14 +5,13 @@
<div class="navbar-brand"> <div class="navbar-brand">
<router-link to="/" class="navbar-item">Ekster</router-link> <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> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
</a> </a>
</div> </div>
<div class="navbar-menu"> <div :class="{'navbar-menu':true,'is-active':menuActive}">
<div class="navbar-end"> <div class="navbar-end">
<div class="buttons"> <div class="buttons">
<button class="button is-light" @click="openSearch">Search</button> <button class="button is-light" @click="openSearch">Search</button>
@ -42,10 +41,18 @@
this.$store.dispatch('startEventListening', '?action=events') this.$store.dispatch('startEventListening', '?action=events')
} }
}, },
computed: {
menuActive() {
return this.$store.state.menuActive
}
},
methods: { methods: {
openSearch () { openSearch () {
this.$store.dispatch('openSearch') this.$store.dispatch('openSearch')
} },
toggleMenu () {
this.$store.dispatch('toggleMenu' )
},
} }
} }
</script> </script>

View File

@ -22,7 +22,8 @@ export default new Vuex.Store({
globalTimeline: {items: []}, globalTimeline: {items: []},
debug: false, debug: false,
debugItem: {}, debugItem: {},
debugVisible: false debugVisible: false,
menuActive: false,
}; };
let loginData = JSON.parse(window.localStorage.getItem('login_data')) let loginData = JSON.parse(window.localStorage.getItem('login_data'))
if (loginData) { if (loginData) {
@ -156,6 +157,9 @@ export default new Vuex.Store({
}, },
closeDebugPopup(state) { closeDebugPopup(state) {
state.debugVisible = false state.debugVisible = false
},
activateMenu(state) {
state.menuActive = !state.menuActive
} }
}, },
@ -326,5 +330,8 @@ export default new Vuex.Store({
closeDebug({commit}) { closeDebug({commit}) {
return commit('closeDebugPopup') return commit('closeDebugPopup')
}, },
toggleMenu({commit}) {
return commit('activateMenu')
}
} }
}) })