diff --git a/src/App.js b/src/App.js index 5e5b6eea..b6234a08 100644 --- a/src/App.js +++ b/src/App.js @@ -39,6 +39,10 @@ export default { created () { // Load the locale from the storage this.$i18n.locale = this.$store.state.config.interfaceLanguage + window.addEventListener('resize', this.updateMobileState) + }, + destroyed () { + window.removeEventListener('resize', this.updateMobileState) }, computed: { currentUser () { return this.$store.state.users.currentUser }, @@ -87,7 +91,8 @@ export default { unseenNotificationsCount () { return this.unseenNotifications.length }, - showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel } + showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, + isMobileLayout () { return this.$store.state.interface.mobileLayout } }, methods: { scrollToTop () { @@ -105,6 +110,13 @@ export default { }, toggleMobileNotifications () { this.notificationsOpen = !this.notificationsOpen + }, + updateMobileState () { + const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth + const changed = width <= 800 !== this.isMobileLayout + if (changed) { + this.$store.dispatch('setMobileLayout', width <= 800) + } } } } diff --git a/src/App.scss b/src/App.scss index 3edc41a0..775bc1c8 100644 --- a/src/App.scss +++ b/src/App.scss @@ -667,7 +667,7 @@ nav { height: 100vh; top: 50px; left: 0; - z-index: 1001; + z-index: 9; overflow-x: hidden; overflow-y: scroll; transition-property: transform; diff --git a/src/App.vue b/src/App.vue index aad84804..d83d5dbe 100644 --- a/src/App.vue +++ b/src/App.vue @@ -25,11 +25,13 @@
- -
- +
+ +
+ +
-