Close sidebar on route change

owncloud · Aug 22, 2022 · 82c6384 · 82c6384
1 parent be47eef
commit 82c6384
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
@@ -5,10 +5,18 @@
   </main>
 </template>
 <script lang="ts">
-import { defineComponent } from '@vue/composition-api'
+import { defineComponent, watch } from '@vue/composition-api'
+import { Route } from 'vue-router'
+import { useRoute, useStore } from 'web-pkg/src/composables'
 import { bus } from 'web-pkg/src/instance'
 
 export default defineComponent({
+  setup() {
+    const store = useStore<any>()
+    watch(useRoute(), (to: Route, from?: Route) => {
+      store.dispatch('Files/resetFileSelection')
+    })
+  },
   data: () => ({
     dragareaEnabled: false
   }),

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -11,11 +11,11 @@
     :loading="loading"
     :is-header-compact="isSingleResource"
     v-bind="$attrs"
-    @beforeDestroy="focusSideBar"
+    @beforeDestroy="destroySideBar"
     @mounted="focusSideBar"
     @fileChanged="focusSideBar"
-    @selectPanel="setActiveSidebarPanel"
-    @close="closeSidebar"
+    @selectPanel="setActiveSideBarPanel"
+    @close="closeSideBar"
     v-on="$listeners"
   >
     <template #header>
@@ -42,17 +42,15 @@ import {
   isLocationSpacesActive,
   isLocationTrashActive
 } from '../../router'
-import { computed, defineComponent, watch } from '@vue/composition-api'
+import { computed, defineComponent } from '@vue/composition-api'
 
 import FileInfo from './FileInfo.vue'
 import SpaceInfo from './SpaceInfo.vue'
 import {
   useCapabilityShareJailEnabled,
   usePublicLinkPassword,
-  useRoute,
   useStore
 } from 'web-pkg/src/composables'
-import { Route } from 'vue-router'
 
 export default defineComponent({
   components: { FileInfo, SpaceInfo, SideBar },
@@ -69,10 +67,10 @@ export default defineComponent({
     const showSidebar = computed(() => !store.getters['Files/sidebar/closed'])
     const sidebarActivePanel = computed(() => store.getters['Files/sidebar/activePanel'])
 
-    const closeSidebar = () => {
+    const closeSideBar = () => {
       store.dispatch('Files/sidebar/close')
     }
-    const setActiveSidebarPanel = (panelName) => {
+    const setActiveSideBarPanel = (panelName) => {
       store.dispatch('Files/sidebar/setActivePanel', panelName)
     }
 
@@ -84,20 +82,19 @@ export default defineComponent({
       })
     }
 
-    watch(useRoute(), (to: Route, from?: Route) => {
-      store.dispatch('Files/resetFileSelection')
-      if (from?.name !== to.name) {
-        closeSidebar()
-      }
-    })
+    const destroySideBar = (component, event) => {
+      focusSideBar(component, event)
+      closeSideBar()
+    }
 
     return {
       hasShareJail: useCapabilityShareJailEnabled(),
       publicLinkPassword: usePublicLinkPassword({ store }),
       showSidebar,
       sidebarActivePanel,
-      closeSidebar,
-      setActiveSidebarPanel,
+      setActiveSideBarPanel,
+      closeSideBar,
+      destroySideBar,
       focusSideBar
     }
   },