[web] Simplify logic of displaying menus

web-src/src/App.vue

@@ -9,13 +9,13 @@
     @close="pairingActive = false"
   />
   <modal-dialog-update
-    :show="showUpdateDialog"
-    @close="showUpdateDialog = false"
+    :show="uiStore.showUpdateDialog"
+    @close="uiStore.showUpdateDialog = false"
   />
-  <list-notifications v-show="!showBurgerMenu" />
+  <list-notifications v-show="!uiStore.showBurgerMenu" />
   <navbar-bottom />
   <div
-    v-show="showBurgerMenu || showPlayerMenu"
+    v-show="uiStore.showBurgerMenu || uiStore.showPlayerMenu"
     class="overlay-fullscreen"
     @click="uiStore.hideMenus"
   />
@@ -71,37 +71,11 @@ export default {
       timerId: 0
     }
   },
-  computed: {
-    showBurgerMenu: {
-      get() {
-        return this.uiStore.showBurgerMenu
-      },
-      set(value) {
-        this.uiStore.showBurgerMenu = value
-      }
-    },
-    showPlayerMenu: {
-      get() {
-        return this.uiStore.showPlayerMenu
-      },
-      set(value) {
-        this.uiStore.showPlayerMenu = value
-      }
-    },
-    showUpdateDialog: {
-      get() {
-        return this.uiStore.showUpdateDialog
-      },
-      set(value) {
-        this.uiStore.showUpdateDialog = value
-      }
-    }
-  },
   watch: {
-    showBurgerMenu() {
+    'uiStore.showBurgerMenu'() {
       this.updateClipping()
     },
-    showPlayerMenu() {
+    'uiStore.showPlayerMenu'() {
       this.updateClipping()
     }
   },
@@ -109,6 +83,7 @@ export default {
     this.connect()
     // Hook the progress bar to start before we move router-view
     this.$router.beforeEach((to, from, next) => {
+      this.updateClipping()
       if (!(to.path === from.path && to.hash)) {
         if (to.meta.progress) {
           this.$Progress.parseMeta(to.meta.progress)
@@ -255,7 +230,7 @@ export default {
       })
     },
     updateClipping() {
-      if (this.showBurgerMenu || this.showPlayerMenu) {
+      if (this.uiStore.showBurgerMenu || this.uiStore.showPlayerMenu) {
         document.querySelector('html').classList.add('is-clipped')
       } else {
         document.querySelector('html').classList.remove('is-clipped')

web-src/src/router/index.js

@@ -39,7 +39,6 @@ import PageSettingsArtwork from '@/pages/PageSettingsArtwork.vue'
 import PageSettingsOnlineServices from '@/pages/PageSettingsOnlineServices.vue'
 import PageSettingsRemotesOutputs from '@/pages/PageSettingsRemotesOutputs.vue'
 import PageSettingsWebinterface from '@/pages/PageSettingsWebinterface.vue'
-import { useUIStore } from '@/stores/ui'
 
 const TOP_WITH_TABS = 100
 
@@ -267,18 +266,3 @@ export const router = createRouter({
     return { left: 0, top: 0 }
   }
 })
-
-router.beforeEach((to, from, next) => {
-  const uiStore = useUIStore()
-  if (uiStore.showBurgerMenu) {
-    uiStore.showBurgerMenu = false
-    next(false)
-    return
-  }
-  if (uiStore.showPlayerMenu) {
-    uiStore.showPlayerMenu = false
-    next(false)
-    return
-  }
-  next(true)
-})