Problem: menu does not work on mobile
Solution: fix menu
This commit is contained in:
parent
3e1695e6f3
commit
52bc6febaa
15
src/App.vue
15
src/App.vue
|
@ -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>
|
||||||
|
|
|
@ -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')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue
Block a user