From 99b5a5fffe0c51e0ebc5643881a9d995b8d411c9 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 29 Jan 2026 09:23:15 +0100
Subject: [PATCH 1/2] refactor: transform useSidebar composable to a pinia
 store

Replaces the `useSideBar` composable with a pinia store. This results in some changes across the code base:

* we don't need to pass the sidebar states around since the global store is accessible from everywhere
* we don't need to rely on events to toggle the sidebar, hence those have been deprecated in favor of store actions
---
 .../src/components/AppTemplate.vue            |  45 +++-----
 .../src/components/Groups/GroupsList.vue      |   9 +-
 .../src/components/Spaces/SpacesList.vue      |   7 +-
 .../src/components/Users/UsersList.vue        |  11 +-
 .../actions/groups/useGroupActionsEdit.ts     |   7 +-
 .../actions/users/useUserActionsEdit.ts       |   7 +-
 .../src/views/General.vue                     |   6 -
 .../src/views/Groups.vue                      |   6 +-
 .../src/views/Spaces.vue                      |   5 +-
 .../src/views/Users.vue                       |   8 +-
 .../src/components/Search/List.vue            |  16 +--
 .../components/Shares/SharedWithMeSection.vue |   5 -
 .../SideBar/Details/FileDetails.vue           |  14 +--
 .../components/SideBar/Details/TagsSelect.vue |  13 +--
 .../src/components/Spaces/SpaceHeader.vue     |  11 +-
 .../useResourcesViewDefaults.ts               |   5 -
 .../web-app-files/src/views/Favorites.vue     |   9 +-
 .../src/views/shares/SharedViaLink.vue        |   9 +-
 .../src/views/shares/SharedWithMe.vue         |  13 +--
 .../src/views/shares/SharedWithOthers.vue     |   9 +-
 .../src/views/spaces/GenericSpace.vue         |  11 +-
 .../src/views/spaces/GenericTrash.vue         |   6 +-
 .../src/views/spaces/Projects.vue             |  16 +--
 .../src/views/trash/Overview.vue              |  15 +--
 .../mocks/useResourcesViewDefaultsMock.ts     |   2 -
 .../src/components/MailAttachmentList.vue     |   2 +-
 .../src/components/MailBodyEditor.vue         |   2 +-
 .../web-pkg/src/components/AppBar/AppBar.vue  |   8 +-
 .../components/AppTemplates/AppWrapper.vue    |   6 +-
 .../components/FilesList/ResourceTable.vue    |  15 +--
 .../components/FilesList/ResourceTiles.vue    |   3 +-
 .../src/components/SideBar/FileSideBar.vue    |  37 ++-----
 .../src/components/SideBar/SideBar.vue        |  28 ++---
 .../SideBar/Spaces/Details/SpaceDetails.vue   |  14 +--
 .../web-pkg/src/components/ViewOptions.vue    |   3 +-
 .../files/useFileActionsShowActions.ts        |   6 +-
 .../files/useFileActionsShowDetails.ts        |   8 +-
 .../actions/files/useFileActionsShowShares.ts |   8 +-
 .../spaces/useSpaceActionsShowMembers.ts      |   7 +-
 .../actions/useActionsShowDetails.ts          |   6 +-
 packages/web-pkg/src/composables/index.ts     |   1 -
 .../src/composables/piniaStores/index.ts      |   7 +-
 .../useSideBar.ts => piniaStores/sideBar.ts}  | 103 +++++++++---------
 .../src/composables/scrollTo/useScrollTo.ts   |   6 +-
 .../src/composables/sideBar/eventTopics.ts    |   7 --
 .../web-pkg/src/composables/sideBar/index.ts  |   2 -
 .../web-pkg/src/helpers/statusIndicators.ts   |   3 +-
 .../FilesList/ResourceTable.spec.ts           |   3 +-
 .../composables/sideBar/useSideBar.spec.ts    |   3 +-
 .../src/components/Topbar/SideBarToggle.vue   |  42 +++----
 .../web-runtime/src/container/bootstrap.ts    |   7 +-
 .../web-runtime/src/layouts/Application.vue   |   4 +-
 52 files changed, 230 insertions(+), 376 deletions(-)
 rename packages/web-pkg/src/composables/{sideBar/useSideBar.ts => piniaStores/sideBar.ts} (51%)
 delete mode 100644 packages/web-pkg/src/composables/sideBar/eventTopics.ts
 delete mode 100644 packages/web-pkg/src/composables/sideBar/index.ts

diff --git a/packages/web-app-admin-settings/src/components/AppTemplate.vue b/packages/web-app-admin-settings/src/components/AppTemplate.vue
index d328b804f9..74c4a5ecb3 100644
--- a/packages/web-app-admin-settings/src/components/AppTemplate.vue
+++ b/packages/web-app-admin-settings/src/components/AppTemplate.vue
@@ -48,13 +48,9 @@
         </div>
         <side-bar
           v-if="isSideBarOpen"
-          :active-panel="sideBarActivePanel"
           :available-panels="sideBarAvailablePanels"
           :panel-context="sideBarPanelContext"
           :loading="sideBarLoading"
-          :is-open="isSideBarOpen"
-          @select-panel="selectPanel"
-          @close="closeSideBar"
         >
           <template #header>
             <slot name="sideBarHeader" />
@@ -73,7 +69,8 @@ import {
   BatchActions,
   SideBarPanelContext,
   Action,
-  useIsTopBarSticky
+  useIsTopBarSticky,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import {
   defineComponent,
@@ -83,15 +80,15 @@ import {
   Ref,
   ref,
   unref,
-  VNodeRef,
+  useTemplateRef,
   watch
 } from 'vue'
-import { eventBus, useAppDefaults } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
+import { useAppDefaults } from '@opencloud-eu/web-pkg'
 import { SideBarPanel } from '@opencloud-eu/web-pkg'
 import { BreadcrumbItem } from '@opencloud-eu/design-system/helpers'
 import { ViewOptions } from '@opencloud-eu/web-pkg'
 import { Item } from '@opencloud-eu/web-client'
+import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   components: {
@@ -105,11 +102,6 @@ export default defineComponent({
       required: true,
       type: Array as PropType<BreadcrumbItem[]>
     },
-    isSideBarOpen: {
-      required: false,
-      type: Boolean,
-      default: false
-    },
     sideBarAvailablePanels: {
       required: false,
       type: Array as PropType<SideBarPanel<unknown, unknown, unknown>[]>,
@@ -120,11 +112,6 @@ export default defineComponent({
       type: Object as PropType<SideBarPanelContext<unknown, unknown, unknown>>,
       default: (): SideBarPanelContext<unknown, unknown, unknown> => ({})
     },
-    sideBarActivePanel: {
-      required: false,
-      type: [String, null],
-      default: null
-    },
     loading: {
       required: false,
       type: Boolean,
@@ -161,30 +148,25 @@ export default defineComponent({
       default: true
     }
   },
-  setup(props) {
-    const appBarRef = ref<VNodeRef>()
+  setup() {
+    const sidebarStore = useSideBar()
+    const { isSideBarOpen } = storeToRefs(sidebarStore)
+    const appBarRef = useTemplateRef<HTMLElement>('appBarRef')
     const limitedScreenSpace = ref(false)
     const { isSticky } = useIsTopBarSticky()
 
     const onResize = () => {
-      limitedScreenSpace.value = props.isSideBarOpen
+      limitedScreenSpace.value = unref(isSideBarOpen)
         ? window.innerWidth <= 1600
         : window.innerWidth <= 1200
     }
     const resizeObserver = new ResizeObserver(onResize)
 
-    const closeSideBar = () => {
-      eventBus.publish(SideBarEventTopics.close)
-    }
-    const selectPanel = (panel: string) => {
-      eventBus.publish(SideBarEventTopics.setActivePanel, panel)
-    }
-
     watch(
       appBarRef,
       (ref) => {
         if (ref) {
-          resizeObserver.observe(unref(appBarRef) as unknown as HTMLElement)
+          resizeObserver.observe(unref(appBarRef))
         }
       },
       { immediate: true }
@@ -192,7 +174,7 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       if (unref(appBarRef)) {
-        resizeObserver.unobserve(unref(appBarRef) as unknown as HTMLElement)
+        resizeObserver.unobserve(unref(appBarRef))
       }
     })
 
@@ -200,8 +182,7 @@ export default defineComponent({
       isMobileWidth: inject<Ref<boolean>>('isMobileWidth'),
       appBarRef,
       limitedScreenSpace,
-      closeSideBar,
-      selectPanel,
+      isSideBarOpen,
       ...useAppDefaults({
         applicationId: 'admin-settings'
       }),
diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index 4963830ca7..8e7fa94cce 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -137,13 +137,13 @@ import {
   displayPositionedDropdown,
   eventBus,
   Pagination,
-  SideBarEventTopics,
   useFileListHeaderPosition,
   useIsTopBarSticky,
   useKeyboardActions,
   usePagination,
   useRoute,
-  useRouter
+  useRouter,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
 import { useGettext } from 'vue3-gettext'
@@ -171,6 +171,7 @@ export default defineComponent({
     const router = useRouter()
     const route = useRoute()
     const { isSticky } = useIsTopBarSticky()
+    const { openSideBar, openSideBarPanel } = useSideBar()
 
     const lastSelectedGroupIndex = ref(0)
     const lastSelectedGroupId = ref<string>()
@@ -208,7 +209,7 @@ export default defineComponent({
       if (!isGroupSelected(group)) {
         selectGroup(group)
       }
-      eventBus.publish(SideBarEventTopics.open)
+      openSideBar()
     }
     const rowClicked = (data: [Group, MouseEvent | KeyboardEvent]) => {
       const resource = data[0]
@@ -268,7 +269,7 @@ export default defineComponent({
       if (!isGroupSelected(group)) {
         selectGroup(group)
       }
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel')
+      openSideBarPanel('EditPanel')
     }
 
     const readOnlyLabel = computed(() => $gettext("This group is read-only and can't be edited"))
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 25fea9922b..55a161627a 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -130,7 +130,8 @@ import {
   useKeyboardActions,
   ContextMenuBtnClickEventData,
   useIsTopBarSticky,
-  useSharesStore
+  useSharesStore,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import {
   ComponentPublicInstance,
@@ -147,7 +148,6 @@ import Mark from 'mark.js'
 import Fuse from 'fuse.js'
 import { useGettext } from 'vue3-gettext'
 import { eventBus } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { ContextMenuQuickAction } from '@opencloud-eu/web-pkg'
 import {
   useFileListHeaderPosition,
@@ -172,6 +172,7 @@ const language = useGettext()
 const { $gettext } = language
 const { isSticky } = useIsTopBarSticky()
 const sharesStore = useSharesStore()
+const { openSideBar } = useSideBar()
 
 const { y: fileListHeaderY } = useFileListHeaderPosition('#admin-settings-app-bar')
 const contextMenuButtonRef =
@@ -487,7 +488,7 @@ const spaceDetailsLabel = computed(() => {
 })
 const showDetailsForSpace = (space: SpaceResource) => {
   selectSpace(space)
-  eventBus.publish(SideBarEventTopics.open)
+  openSideBar()
 }
 
 const selectSpace = (selectedSpace: SpaceResource) => {
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index 34869c39b4..d112e330ee 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -131,13 +131,13 @@ import {
   eventBus,
   Pagination,
   queryItemAsString,
-  SideBarEventTopics,
   useFileListHeaderPosition,
   useIsTopBarSticky,
   useKeyboardActions,
   usePagination,
   useRouteQuery,
-  UserAvatar
+  UserAvatar,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import { AppRole, User } from '@opencloud-eu/web-client/graph/generated'
 import { perPageDefault, perPageStoragePrefix } from '../../defaults'
@@ -169,6 +169,7 @@ export default defineComponent({
   setup(props) {
     const { $gettext } = useGettext()
     const { isSticky } = useIsTopBarSticky()
+    const { openSideBar, openSideBarPanel } = useSideBar()
 
     const tableRef = useTemplateRef<ComponentPublicInstance<typeof OcTable>>('tableRef')
     const contextMenuButtonRef =
@@ -214,21 +215,21 @@ export default defineComponent({
       if (!isUserSelected(user)) {
         selectUser(user)
       }
-      eventBus.publish(SideBarEventTopics.open)
+      openSideBar()
     }
 
     const showEditPanel = (user: User) => {
       if (!isUserSelected(user)) {
         selectUser(user)
       }
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel')
+      openSideBarPanel('EditPanel')
     }
 
     const showUserAssigmentPanel = (user: User) => {
       if (!isUserSelected(user)) {
         selectUser(user)
       }
-      eventBus.publish(SideBarEventTopics.openWithPanel, 'UserAssignmentsPanel')
+      openSideBarPanel('UserAssignmentsPanel')
     }
 
     const rowClicked = (data: [User, MouseEvent | KeyboardEvent]) => {
diff --git a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts
index 6fe5a5a71e..ad205004ce 100644
--- a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsEdit.ts
@@ -1,18 +1,17 @@
-import { eventBus } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { computed } from 'vue'
-import { GroupAction } from '@opencloud-eu/web-pkg'
+import { GroupAction, useSideBar } from '@opencloud-eu/web-pkg'
 
 export const useGroupActionsEdit = () => {
   const { $gettext } = useGettext()
+  const { openSideBarPanel } = useSideBar()
 
   const actions = computed((): GroupAction[] => [
     {
       name: 'edit',
       icon: 'pencil',
       label: () => $gettext('Edit'),
-      handler: () => eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel'),
+      handler: () => openSideBarPanel('EditPanel'),
       isVisible: ({ resources }) => {
         return resources.length === 1 && !resources[0].groupTypes?.includes('ReadOnly')
       },
diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEdit.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEdit.ts
index e5e9753973..8176727a83 100644
--- a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEdit.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEdit.ts
@@ -1,18 +1,17 @@
-import { eventBus } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { computed } from 'vue'
-import { UserAction } from '@opencloud-eu/web-pkg'
+import { UserAction, useSideBar } from '@opencloud-eu/web-pkg'
 
 export const useUserActionsEdit = () => {
   const { $gettext } = useGettext()
+  const { openSideBarPanel } = useSideBar()
 
   const actions = computed((): UserAction[] => [
     {
       name: 'edit',
       icon: 'pencil',
       label: () => $gettext('Edit'),
-      handler: () => eventBus.publish(SideBarEventTopics.openWithPanel, 'EditPanel'),
+      handler: () => openSideBarPanel('EditPanel'),
       isVisible: ({ resources }) => {
         return resources.length === 1
       },
diff --git a/packages/web-app-admin-settings/src/views/General.vue b/packages/web-app-admin-settings/src/views/General.vue
index 474ac1429c..f6ae8e2d63 100644
--- a/packages/web-app-admin-settings/src/views/General.vue
+++ b/packages/web-app-admin-settings/src/views/General.vue
@@ -8,8 +8,6 @@
         }
       ]"
       :show-app-bar="false"
-      :is-side-bar-open="isSideBarOpen"
-      :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
     >
       <template #mainContent>
@@ -22,16 +20,12 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentPublicInstance, useTemplateRef } from 'vue'
 import AppTemplate from '../components/AppTemplate.vue'
 import InfoSection from '../components/General/InfoSection.vue'
 import DetailsPanel from '../components/General/SideBar/DetailsPanel.vue'
 import { useGettext } from 'vue3-gettext'
-import { useSideBar } from '@opencloud-eu/web-pkg'
 
-const template = useTemplateRef<ComponentPublicInstance<typeof AppTemplate>>('template')
 const { $gettext } = useGettext()
-const { isSideBarOpen, sideBarActivePanel } = useSideBar()
 
 const sideBarAvailablePanels = [
   {
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index 8e8d24b20a..7a7c1436df 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -4,10 +4,8 @@
       ref="template"
       :loading="loadResourcesTask.isRunning || !loadResourcesTask.last"
       :breadcrumbs="breadcrumbs"
-      :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-panel-context="sideBarPanelContext"
-      :is-side-bar-open="isSideBarOpen"
       :show-batch-actions="!!selectedGroups.length"
       :batch-actions="batchActions"
       :batch-action-items="selectedGroups"
@@ -63,8 +61,7 @@ import {
   NoContentMessage,
   SideBarPanel,
   SideBarPanelContext,
-  useClientService,
-  useSideBar
+  useClientService
 } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
 import {
@@ -181,7 +178,6 @@ export default defineComponent({
     })
 
     return {
-      ...useSideBar(),
       groups,
       selectedGroups,
       template,
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index 334ef99df0..b99605f6b3 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -4,10 +4,8 @@
       ref="template"
       :loading="loadResourcesTask.isRunning || !loadResourcesTask.last"
       :breadcrumbs="breadcrumbs"
-      :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-panel-context="sideBarPanelContext"
-      :is-side-bar-open="isSideBarOpen"
       :show-batch-actions="!!selectedSpaces.length"
       :batch-actions="batchActions"
       :batch-action-items="selectedSpaces"
@@ -95,7 +93,8 @@ import { Quota } from '@opencloud-eu/web-client/graph/generated'
 
 const clientService = useClientService()
 const { $gettext } = useGettext()
-const { isSideBarOpen, sideBarActivePanel } = useSideBar()
+const sidebarStore = useSideBar()
+const { isSideBarOpen } = storeToRefs(sidebarStore)
 const { can } = useAbility()
 
 let loadResourcesEventToken: string
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index b5e8b42227..4bd190318d 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/packages/web-app-admin-settings/src/views/Users.vue
@@ -3,10 +3,8 @@
     <app-template
       ref="template"
       :breadcrumbs="breadcrumbs"
-      :side-bar-active-panel="sideBarActivePanel"
       :side-bar-available-panels="sideBarAvailablePanels"
       :side-bar-panel-context="sideBarPanelContext"
-      :is-side-bar-open="isSideBarOpen"
       :side-bar-loading="sideBarLoading"
       :show-batch-actions="!!selectedUsers.length"
       :batch-actions="batchActions"
@@ -200,6 +198,8 @@ export default defineComponent({
     const { graphUsersEditLoginAllowedDisabled } = storeToRefs(capabilityStore)
     const clientService = useClientService()
     const configStore = useConfigStore()
+    const sidebarStore = useSideBar()
+    const { isSideBarOpen } = storeToRefs(sidebarStore)
 
     const userSettingsStore = useUserSettingsStore()
     const { users, selectedUsers } = storeToRefs(userSettingsStore)
@@ -482,7 +482,6 @@ export default defineComponent({
     ] satisfies SideBarPanel<unknown, unknown, User>[]
 
     return {
-      ...useSideBar(),
       maxQuota: capabilityRefs.spacesMaxQuota,
       template,
       selectedUsers,
@@ -506,7 +505,8 @@ export default defineComponent({
       sideBarAvailablePanels,
       createUserAction,
       createUserActionIcon,
-      userSettingsStore
+      userSettingsStore,
+      isSideBarOpen
     }
   },
   computed: {
diff --git a/packages/web-app-files/src/components/Search/List.vue b/packages/web-app-files/src/components/Search/List.vue
index f637c0345e..da2b21b7b7 100644
--- a/packages/web-app-files/src/components/Search/List.vue
+++ b/packages/web-app-files/src/components/Search/List.vue
@@ -1,12 +1,7 @@
 <template>
   <div class="flex">
     <files-view-wrapper>
-      <app-bar
-        :breadcrumbs="breadcrumbs"
-        :has-bulk-actions="true"
-        :is-side-bar-open="isSideBarOpen"
-        :view-modes="viewModes"
-      />
+      <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" :view-modes="viewModes" />
       <div v-if="displayFilter" class="files-search-result-filter flex flex-wrap mx-4 mb-4 mt-1">
         <div class="mr-4 flex items-center">
           <oc-icon name="filter-2" class="mr-1" />
@@ -88,7 +83,6 @@
           :is="folderView.component"
           v-else
           v-model:selected-ids="selectedResourcesIds"
-          :is-side-bar-open="isSideBarOpen"
           :header-position="fileListHeaderY"
           :resources="paginatedResources"
           :are-paths-displayed="true"
@@ -131,11 +125,7 @@
         </component>
       </template>
     </files-view-wrapper>
-    <file-side-bar
-      :is-open="isSideBarOpen"
-      :active-panel="sideBarActivePanel"
-      :space="selectedResourceSpace"
-    />
+    <file-side-bar :space="selectedResourceSpace" />
   </div>
 </template>
 
@@ -233,14 +223,12 @@ const { triggerDefaultAction } = useFileActions()
 
 const {
   folderView,
-  isSideBarOpen,
   paginatedResources,
   paginationPage,
   paginationPages,
   selectedResources,
   selectedResourcesIds,
   selectedResourceSpace,
-  sideBarActivePanel,
   sortBy,
   sortDir,
   sortFields,
diff --git a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
index f77aa5f7a6..6ede36ba8e 100644
--- a/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
+++ b/packages/web-app-files/src/components/Shares/SharedWithMeSection.vue
@@ -14,7 +14,6 @@
       :is="folderView.component"
       v-else
       v-model:selected-ids="selectedResourcesIds"
-      :is-side-bar-open="isSideBarOpen"
       :fields-displayed="displayedFields"
       :resources="resourceItems"
       :are-resources-clickable="resourceClickable"
@@ -147,10 +146,6 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
-    isSideBarOpen: {
-      type: Boolean,
-      default: false
-    },
     fileListHeaderY: {
       type: Number,
       default: 0
diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index ee0f157d75..78c9b4f5c5 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -48,7 +48,7 @@
               appearance="raw"
               :aria-label="seeVersionsLabel"
               no-hover
-              @click="expandVersionsPanel"
+              @click="openSideBarPanel('versions')"
             >
               {{ capitalizedTimestamp }}
             </oc-button>
@@ -96,7 +96,7 @@
               appearance="raw"
               :aria-label="seeVersionsLabel"
               no-hover
-              @click="expandVersionsPanel"
+              @click="openSideBarPanel('versions')"
             >
               {{ versions.length }}
             </oc-button>
@@ -138,7 +138,8 @@ import {
   formatDateFromJSDate,
   useResourceContents,
   useLoadPreview,
-  useInterceptModifierClick
+  useInterceptModifierClick,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import upperFirst from 'lodash-es/upperFirst'
 import {
@@ -150,8 +151,6 @@ import {
 import { useGetMatchingSpace } from '@opencloud-eu/web-pkg'
 import { getIndicators } from '@opencloud-eu/web-pkg'
 import { formatFileSize, formatRelativeDateFromJSDate } from '@opencloud-eu/web-pkg'
-import { eventBus } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { Resource, SpaceResource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
 import { getSharedAncestorRoute } from '@opencloud-eu/web-pkg'
@@ -172,6 +171,7 @@ const capabilityStore = useCapabilityStore()
 const { getMatchingSpace } = useGetMatchingSpace()
 const { resourceContentsText } = useResourceContents({ showSizeInformation: false })
 const { loadPreview, previewsLoading } = useLoadPreview()
+const { openSideBarPanel } = useSideBar()
 
 const language = useGettext()
 const { $gettext, current: currentLanguage } = language
@@ -319,10 +319,6 @@ const capitalizedTimestamp = computed(() => {
   return upperFirst(displayDate)
 })
 
-const expandVersionsPanel = () => {
-  eventBus.publish(SideBarEventTopics.setActivePanel, 'versions')
-}
-
 watch(
   () => unref(resource).id,
   async () => {
diff --git a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
index d5d3febe26..9599a3966a 100644
--- a/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/TagsSelect.vue
@@ -26,7 +26,7 @@
           :is="type"
           v-bind="getAdditionalAttributes(option.label)"
           class="flex items-center max-w-50"
-          @click="onTagClicked"
+          @click="closeSideBar()"
         >
           <oc-icon name="price-tag-3" class="mr-1" size="small" />
           <span class="truncate">{{ option.label }}</span>
@@ -83,12 +83,12 @@ import {
 import {
   createLocationCommon,
   eventBus,
-  SideBarEventTopics,
   useAuthStore,
   useClientService,
   useMessages,
   useResourcesStore,
-  useRouter
+  useRouter,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { useTask } from 'vue-concurrency'
@@ -124,6 +124,7 @@ export default defineComponent({
     const clientService = useClientService()
     const router = useRouter()
     const { updateResourceField } = useResourcesStore()
+    const { closeSideBar } = useSideBar()
 
     const authStore = useAuthStore()
     const { publicLinkContextReady } = storeToRefs(authStore)
@@ -148,10 +149,6 @@ export default defineComponent({
       return [...unref(resource).tags.map((t) => ({ label: t }))]
     })
 
-    const onTagClicked = () => {
-      eventBus.publish(SideBarEventTopics.close)
-    }
-
     const loadAvailableTagsTask = useTask(function* (signal) {
       const tags = yield* call(clientService.graphAuthenticated.tags.listTags({ signal }))
 
@@ -303,7 +300,7 @@ export default defineComponent({
       keydownMethods,
       readonly,
       getAdditionalAttributes,
-      onTagClicked,
+      closeSideBar,
       getTagToolTip,
       type
     }
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index 8b2d64b0b3..70a8d04ffe 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -116,15 +116,14 @@ import {
 } from 'vue'
 import { buildSpaceImageResource, Resource, SpaceResource } from '@opencloud-eu/web-client'
 import {
-  eventBus,
   ImageDimension,
   ProcessorType,
-  SideBarEventTopics,
   TextEditor,
   useClientService,
   useLoadPreview,
   useResourcesStore,
   useSharesStore,
+  useSideBar,
   useSpacesStore
 } from '@opencloud-eu/web-pkg'
 import SpaceContextActions from './SpaceContextActions.vue'
@@ -134,9 +133,8 @@ import { storeToRefs } from 'pinia'
 
 const markdownContainerCollapsedClass = 'collapsed'
 
-const { space, isSideBarOpen = false } = defineProps<{
+const { space } = defineProps<{
   space: SpaceResource
-  isSideBarOpen?: boolean
 }>()
 
 const language = useGettext()
@@ -149,6 +147,9 @@ const spacesStore = useSpacesStore()
 const sharesStore = useSharesStore()
 const { imagesLoading, readmesLoading } = storeToRefs(spacesStore)
 
+const sidebarStore = useSideBar()
+const { isSideBarOpen } = storeToRefs(sidebarStore)
+
 const isMobileWidth = inject<Ref<boolean>>('isMobileWidth')
 
 const isDropOpen = ref(false)
@@ -298,6 +299,6 @@ const memberCountString = computed(() => {
 
 const openSideBarSharePanel = () => {
   resourcesStore.setSelection([])
-  eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share')
+  sidebarStore.openSideBarPanel('space-share')
 }
 </script>
diff --git a/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts b/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
index a92ca9055d..ec974b3d3b 100644
--- a/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
+++ b/packages/web-app-files/src/composables/resourcesViewDefaults/useResourcesViewDefaults.ts
@@ -11,7 +11,6 @@ import {
   FolderViewExtension,
   FolderView
 } from '@opencloud-eu/web-pkg'
-import { useSideBar } from '@opencloud-eu/web-pkg'
 import { queryItemAsString, useRouteQuery } from '@opencloud-eu/web-pkg'
 import {
   determineResourceTableSortFields,
@@ -57,9 +56,6 @@ type ResourcesViewDefaultsResult<T extends Resource, TT, TU extends any[]> = {
   selectedResources: Ref<Resource[]>
   selectedResourcesIds: Ref<string[]>
   isResourceInSelection(resource: Resource): boolean
-
-  isSideBarOpen: Ref<boolean>
-  sideBarActivePanel: Ref<string>
 } & SelectedResourcesResult &
   ScrollToResult
 
@@ -153,7 +149,6 @@ export const useResourcesViewDefaults = <T extends Resource, TT, TU extends any[
     sortBy,
     sortDir,
     ...useSelectedResources(),
-    ...useSideBar(),
     ...useScrollTo()
   }
 }
diff --git a/packages/web-app-files/src/views/Favorites.vue b/packages/web-app-files/src/views/Favorites.vue
index da5f6f3092..8c3fd25e28 100644
--- a/packages/web-app-files/src/views/Favorites.vue
+++ b/packages/web-app-files/src/views/Favorites.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <files-view-wrapper>
-      <app-bar :view-modes="viewModes" :is-side-bar-open="isSideBarOpen" />
+      <app-bar :view-modes="viewModes" />
       <app-loading-spinner v-if="areResourcesLoading" />
       <template v-else>
         <no-content-message v-if="isEmpty" id="files-favorites-empty" icon="star">
@@ -13,7 +13,6 @@
           :is="folderView.component"
           v-else
           v-model:selected-ids="selectedResourcesIds"
-          :is-side-bar-open="isSideBarOpen"
           :are-paths-displayed="true"
           :resources="paginatedResources"
           :header-position="fileListHeaderY"
@@ -40,11 +39,7 @@
         </component>
       </template>
     </files-view-wrapper>
-    <file-side-bar
-      :is-open="isSideBarOpen"
-      :active-panel="sideBarActivePanel"
-      :space="selectedResourceSpace"
-    />
+    <file-side-bar :space="selectedResourceSpace" />
   </div>
 </template>
 
diff --git a/packages/web-app-files/src/views/shares/SharedViaLink.vue b/packages/web-app-files/src/views/shares/SharedViaLink.vue
index 40718eab47..24333bb8a3 100644
--- a/packages/web-app-files/src/views/shares/SharedViaLink.vue
+++ b/packages/web-app-files/src/views/shares/SharedViaLink.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <files-view-wrapper>
-      <app-bar :is-side-bar-open="isSideBarOpen" :view-modes="viewModes">
+      <app-bar :view-modes="viewModes">
         <template #navigation>
           <SharesNavigation />
         </template>
@@ -17,7 +17,6 @@
           :is="folderView.component"
           v-else
           v-model:selected-ids="selectedResourcesIds"
-          :is-side-bar-open="isSideBarOpen"
           :fields-displayed="['name', 'sdate']"
           :are-paths-displayed="true"
           :resources="paginatedResources"
@@ -44,11 +43,7 @@
         </component>
       </template>
     </files-view-wrapper>
-    <file-side-bar
-      :is-open="isSideBarOpen"
-      :active-panel="sideBarActivePanel"
-      :space="selectedResourceSpace"
-    />
+    <file-side-bar :space="selectedResourceSpace" />
   </div>
 </template>
 
diff --git a/packages/web-app-files/src/views/shares/SharedWithMe.vue b/packages/web-app-files/src/views/shares/SharedWithMe.vue
index 29f6b2f827..3251f8d3df 100644
--- a/packages/web-app-files/src/views/shares/SharedWithMe.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithMe.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <files-view-wrapper class="flex-col">
-      <app-bar :has-bulk-actions="true" :is-side-bar-open="isSideBarOpen" :view-modes="viewModes">
+      <app-bar :has-bulk-actions="true" :view-modes="viewModes">
         <template #navigation>
           <SharesNavigation />
         </template>
@@ -69,7 +69,6 @@
           id="files-shared-with-me-view"
           :file-list-header-y="fileListHeaderY"
           :items="items"
-          :is-side-bar-open="isSideBarOpen"
           :sort-by="sortBy"
           :sort-dir="sortDir"
           :sort-handler="handleSort"
@@ -84,11 +83,7 @@
         />
       </template>
     </files-view-wrapper>
-    <file-side-bar
-      :is-open="isSideBarOpen"
-      :active-panel="sideBarActivePanel"
-      :space="selectedShareSpace"
-    />
+    <file-side-bar :space="selectedShareSpace" />
   </div>
 </template>
 
@@ -150,8 +145,6 @@ export default defineComponent({
       loadResourcesTask,
       selectedResources,
       selectedResourcesIds,
-      sideBarActivePanel,
-      isSideBarOpen,
       paginatedResources,
       scrollToResourceFromRoute
     } = resourcesViewDefaults
@@ -287,8 +280,6 @@ export default defineComponent({
       selectedResources,
       selectedResourcesIds,
       fileListHeaderY,
-      isSideBarOpen,
-      sideBarActivePanel,
       selectedShareSpace,
 
       areHiddenFilesShown,
diff --git a/packages/web-app-files/src/views/shares/SharedWithOthers.vue b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
index 953540e13b..03376a05ad 100644
--- a/packages/web-app-files/src/views/shares/SharedWithOthers.vue
+++ b/packages/web-app-files/src/views/shares/SharedWithOthers.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex">
     <files-view-wrapper>
-      <app-bar :is-side-bar-open="isSideBarOpen" :view-modes="viewModes">
+      <app-bar :view-modes="viewModes">
         <template #navigation>
           <SharesNavigation />
         </template>
@@ -39,7 +39,6 @@
           :is="folderView.component"
           v-else
           v-model:selected-ids="selectedResourcesIds"
-          :is-side-bar-open="isSideBarOpen"
           :fields-displayed="['name', 'sharedWith', 'sdate']"
           :are-paths-displayed="true"
           :resources="filteredItems"
@@ -66,11 +65,7 @@
         </component>
       </template>
     </files-view-wrapper>
-    <file-side-bar
-      :is-open="isSideBarOpen"
-      :active-panel="sideBarActivePanel"
-      :space="selectedResourceSpace"
-    />
+    <file-side-bar :space="selectedResourceSpace" />
   </div>
 </template>
 
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 4583971591..087c52facb 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -8,7 +8,6 @@
         :has-bulk-actions="displayFullAppBar"
         :show-actions-on-selection="displayFullAppBar"
         :has-view-options="displayFullAppBar"
-        :is-side-bar-open="isSideBarOpen"
         :space="space"
         :view-modes="viewModes"
         @item-dropped="fileDropped"
@@ -32,12 +31,7 @@
           :class="{ 'h-[55vh]': isSpaceFrontpage }"
         />
         <template v-else>
-          <space-header
-            v-if="hasSpaceHeader"
-            :space="space"
-            :is-side-bar-open="isSideBarOpen"
-            class="px-4 mt-2"
-          />
+          <space-header v-if="hasSpaceHeader" :space="space" class="px-4 mt-2" />
           <no-content-message
             v-if="isCurrentFolderEmpty"
             id="files-space-empty"
@@ -73,7 +67,6 @@
               :drag-drop="true"
               :sort-by="sortBy"
               :sort-dir="sortDir"
-              :is-side-bar-open="isSideBarOpen"
               :header-position="fileListHeaderY /* table */"
               :sort-fields="sortFields /* tiles */"
               :view-size="viewSize /* tiles */"
@@ -107,7 +100,7 @@
         </template>
       </template>
     </files-view-wrapper>
-    <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
+    <file-side-bar :space="space" />
   </div>
 </template>
 
diff --git a/packages/web-app-files/src/views/spaces/GenericTrash.vue b/packages/web-app-files/src/views/spaces/GenericTrash.vue
index e5c2e59237..962f8fff33 100644
--- a/packages/web-app-files/src/views/spaces/GenericTrash.vue
+++ b/packages/web-app-files/src/views/spaces/GenericTrash.vue
@@ -4,7 +4,6 @@
       <app-bar
         :breadcrumbs="breadcrumbs"
         :has-bulk-actions="true"
-        :is-side-bar-open="isSideBarOpen"
         :space="space"
         :view-modes="viewModes"
       >
@@ -40,7 +39,6 @@
           :is="folderView.component"
           v-else
           v-model:selected-ids="selectedResourcesIds"
-          :is-side-bar-open="isSideBarOpen"
           :fields-displayed="['name', 'ddate']"
           :are-paths-displayed="true"
           :resources="paginatedResources"
@@ -69,7 +67,7 @@
         </component>
       </template>
     </files-view-wrapper>
-    <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
+    <file-side-bar :space="space" />
   </div>
 </template>
 
@@ -117,12 +115,10 @@ const {
   paginationPages,
   paginationPage,
   selectedResourcesIds,
-  isSideBarOpen,
   fileListHeaderY,
   sortBy,
   sortDir,
   handleSort,
-  sideBarActivePanel,
   selectedResources,
   isResourceInSelection,
   viewMode,
diff --git a/packages/web-app-files/src/views/spaces/Projects.vue b/packages/web-app-files/src/views/spaces/Projects.vue
index a868d6ae89..3a10cdb554 100644
--- a/packages/web-app-files/src/views/spaces/Projects.vue
+++ b/packages/web-app-files/src/views/spaces/Projects.vue
@@ -9,7 +9,6 @@
         :has-file-extensions="false"
         :has-pagination="false"
         :batch-actions-loading="batchActionsLoading"
-        :is-side-bar-open="isSideBarOpen"
         :view-modes="viewModes"
         :view-mode-default="FolderViewModeConstants.defaultModeName"
       >
@@ -53,7 +52,6 @@
             :sort-by="sortBy"
             :sort-dir="sortDir"
             :header-position="fileListHeaderY"
-            :is-side-bar-open="isSideBarOpen"
             :view-size="viewSize"
             :view-mode="viewMode"
             v-bind="folderView.componentAttrs?.()"
@@ -130,11 +128,7 @@
         </div>
       </template>
     </files-view-wrapper>
-    <file-side-bar
-      :is-open="isSideBarOpen"
-      :active-panel="sideBarActivePanel"
-      :space="selectedSpace"
-    />
+    <file-side-bar :space="selectedSpace" />
   </div>
 </template>
 
@@ -160,7 +154,8 @@ import {
   useRoute,
   Pagination,
   FileSideBar,
-  NoContentMessage
+  NoContentMessage,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import SpaceContextActions from '../../components/Spaces/SpaceContextActions.vue'
 import {
@@ -170,7 +165,6 @@ import {
 } from '@opencloud-eu/web-client'
 import FilesViewWrapper from '../../components/FilesViewWrapper.vue'
 import { eventBus } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics, useSideBar } from '@opencloud-eu/web-pkg'
 import { sortFields as availableSortFields, translateSortFields } from '@opencloud-eu/web-pkg'
 import { defaultFuseOptions, formatFileSize, ResourceIcon } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
@@ -195,7 +189,7 @@ const { $gettext, $ngettext } = language
 const filterTerm = ref('')
 const resourcesStore = useResourcesStore()
 const { imagesLoading } = storeToRefs(spacesStore)
-const { isSideBarOpen, sideBarActivePanel } = useSideBar()
+const { openSideBarPanel } = useSideBar()
 
 const { setSelection, initResourceList, clearResourceList, setAncestorMetaData } = resourcesStore
 const { areDisabledSpacesShown } = storeToRefs(resourcesStore)
@@ -439,6 +433,6 @@ const showSpaceMemberLabel = computed(() => {
 
 const openSidebarSharePanel = (space: SpaceResource) => {
   setSelection([space.id])
-  eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share')
+  openSideBarPanel('space-share')
 }
 </script>
diff --git a/packages/web-app-files/src/views/trash/Overview.vue b/packages/web-app-files/src/views/trash/Overview.vue
index 3212aa4185..6903446d86 100644
--- a/packages/web-app-files/src/views/trash/Overview.vue
+++ b/packages/web-app-files/src/views/trash/Overview.vue
@@ -35,7 +35,6 @@
             :sort-by="sortBy"
             :sort-dir="sortDir"
             :sort-fields="sortFields.filter((field) => field.name === 'name')"
-            :is-side-bar-open="isSideBarOpen"
             :header-position="fileListHeaderY"
             :are-thumbnails-displayed="false"
             :are-paths-displayed="false"
@@ -70,7 +69,7 @@
         </template>
       </template>
     </files-view-wrapper>
-    <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" />
+    <file-side-bar />
   </div>
 </template>
 
@@ -122,16 +121,8 @@ const resourcesViewDefaults = useResourcesViewDefaults<SpaceResource, any, any>(
   folderViewExtensionPoint: folderViewsTrashOverviewExtensionPoint
 })
 
-const {
-  isSideBarOpen,
-  fileListHeaderY,
-  sideBarActivePanel,
-  viewMode,
-  viewModes,
-  viewSize,
-  sortFields,
-  folderView
-} = resourcesViewDefaults
+const { fileListHeaderY, viewMode, viewModes, viewSize, sortFields, folderView } =
+  resourcesViewDefaults
 
 const { loadPreview } = useLoadPreview(viewMode)
 
diff --git a/packages/web-app-files/tests/mocks/useResourcesViewDefaultsMock.ts b/packages/web-app-files/tests/mocks/useResourcesViewDefaultsMock.ts
index d90aa409aa..caf53d76a8 100644
--- a/packages/web-app-files/tests/mocks/useResourcesViewDefaultsMock.ts
+++ b/packages/web-app-files/tests/mocks/useResourcesViewDefaultsMock.ts
@@ -37,8 +37,6 @@ export const useResourcesViewDefaultsMock = (
     selectedResourcesIds: ref([]),
     selectedResourceSpace: ref(mock<SpaceResource>()),
     isResourceInSelection: vi.fn(() => false),
-    isSideBarOpen: ref(false),
-    sideBarActivePanel: ref(''),
     scrollToResource: vi.fn(),
     scrollToResourceFromRoute: vi.fn(),
     viewMode: ref('resource-table'),
diff --git a/packages/web-app-mail/src/components/MailAttachmentList.vue b/packages/web-app-mail/src/components/MailAttachmentList.vue
index a6e92b2c2a..ab3b6f1e81 100644
--- a/packages/web-app-mail/src/components/MailAttachmentList.vue
+++ b/packages/web-app-mail/src/components/MailAttachmentList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mail-attachment-list" v-if="attachments.length">
+  <div v-if="attachments.length" class="mail-attachment-list">
     <oc-card
       title="mail-attachments"
       header-class="items-start pl-0"
diff --git a/packages/web-app-mail/src/components/MailBodyEditor.vue b/packages/web-app-mail/src/components/MailBodyEditor.vue
index 5a3b1f1bd0..b232484a17 100644
--- a/packages/web-app-mail/src/components/MailBodyEditor.vue
+++ b/packages/web-app-mail/src/components/MailBodyEditor.vue
@@ -111,7 +111,7 @@ const applyLink = (rawInput: string, selection: SelectionRange) => {
 
   const safeHref = sanitizeHref(rawInput)
 
-  let chain = editor.value.chain().focus().setTextSelection(selection)
+  const chain = editor.value.chain().focus().setTextSelection(selection)
 
   if (!safeHref) {
     chain.extendMarkRange('link').unsetLink().run()
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 8acadd480e..d6ad40a61d 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -102,6 +102,7 @@ import {
   useResourcesStore,
   useRouteMeta,
   useRouter,
+  useSideBar,
   useSpaceActionsDelete,
   useSpaceActionsDisable,
   useSpaceActionsEditQuota,
@@ -144,7 +145,6 @@ export default defineComponent({
     hasFileExtensions: { type: Boolean, default: true },
     hasPagination: { type: Boolean, default: true },
     showActionsOnSelection: { type: Boolean, default: false },
-    isSideBarOpen: { type: Boolean, default: false },
     batchActionsLoading: { type: Boolean, default: false },
     space: {
       type: Object as PropType<SpaceResource>,
@@ -160,6 +160,9 @@ export default defineComponent({
     const { requestExtensions } = useExtensionRegistry()
     const { isSticky } = useIsTopBarSticky()
 
+    const sidebarStore = useSideBar()
+    const { isSideBarOpen } = storeToRefs(sidebarStore)
+
     const resourcesStore = useResourcesStore()
     const { selectedResources } = storeToRefs(resourcesStore)
 
@@ -279,7 +282,8 @@ export default defineComponent({
       fileDroppedBreadcrumb,
       pageTitle,
       selectedResources,
-      isSticky
+      isSticky,
+      isSideBarOpen
     }
   },
   data: function () {
diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
index 5a19d171b3..2d2ea436c2 100644
--- a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -20,7 +20,7 @@
         :class="{ 'w-[calc(100%-440px)]': isSideBarOpen && !isMobile }"
         v-bind="slotAttrs"
       />
-      <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
+      <file-side-bar :space="space" />
     </div>
   </main>
 </template>
@@ -88,6 +88,7 @@ import { UnsavedChangesModal } from '../Modals'
 import { formatFileSize, getSharedDriveItem } from '../../helpers'
 import toNumber from 'lodash-es/toNumber'
 import { useIsMobile } from '@opencloud-eu/design-system/composables'
+import { storeToRefs } from 'pinia'
 
 const {
   applicationId,
@@ -121,7 +122,8 @@ const resourcesStore = useResourcesStore()
 const sharesStore = useSharesStore()
 const eventBus = useEventBus()
 const { isMobile } = useIsMobile()
-const { isSideBarOpen, sideBarActivePanel } = useSideBar()
+const sidebarStore = useSideBar()
+const { isSideBarOpen } = storeToRefs(sidebarStore)
 
 const { actions: openWithAppActions } = useFileActionsOpenWithApp({
   appId: applicationId
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTable.vue b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
index fa5e9bf2b1..c7abaf357f 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTable.vue
@@ -142,7 +142,7 @@
         v-if="item.tags.length > 2"
         size="small"
         class="resource-table-tag-more align-text-bottom cursor-pointer"
-        @click="openTagsSidebar()"
+        @click="sidebarStore.openSideBar()"
       >
         + {{ item.tags.length - 2 }}
       </oc-tag>
@@ -285,14 +285,13 @@ import {
   useResourcesStore,
   useResourceViewHelpers,
   useRouter,
-  useSpaceActionsRename
+  useSpaceActionsRename,
+  useSideBar
 } from '../../composables'
 import ResourceListItem from './ResourceListItem.vue'
 import ResourceGhostElement from './ResourceGhostElement.vue'
 import ResourceSize from './ResourceSize.vue'
-import { eventBus } from '../../services'
 import { formatDateFromJSDate, formatRelativeDateFromJSDate } from '../../helpers'
-import { SideBarEventTopics } from '../../composables/sideBar'
 import ContextMenuQuickAction from '../ContextActions/ContextMenuQuickAction.vue'
 import { useInterceptModifierClick } from '../../composables/keyboardActions'
 import { determineResourceTableSortFields } from '../../helpers/ui/resourceTable'
@@ -318,7 +317,6 @@ const {
   areResourcesClickable = true,
   headerPosition = 0,
   isSelectable = true,
-  isSideBarOpen = false,
   dragDrop = false,
   viewMode = FolderViewModeConstants.defaultModeName,
   hover = true,
@@ -338,7 +336,6 @@ const {
   areResourcesClickable?: boolean
   headerPosition?: number
   isSelectable?: boolean
-  isSideBarOpen?: boolean
   dragDrop?: boolean
   viewMode?:
     | typeof FolderViewModeConstants.name.condensedTable
@@ -418,6 +415,9 @@ const {
   emit
 })
 
+const sidebarStore = useSideBar()
+const { isSideBarOpen } = storeToRefs(sidebarStore)
+
 const authStore = useAuthStore()
 const { userContextReady } = storeToRefs(authStore)
 
@@ -674,9 +674,6 @@ const openRenameDialog = (item: Resource) => {
     resources: [item]
   })
 }
-const openTagsSidebar = () => {
-  eventBus.publish(SideBarEventTopics.open)
-}
 
 const formatDate = (date: string) => {
   return formatDateFromJSDate(new Date(date), currentLanguage)
diff --git a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
index 4d5ba7a3a4..b5a048d1a0 100644
--- a/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
+++ b/packages/web-pkg/src/components/FilesList/ResourceTiles.vue
@@ -211,7 +211,8 @@ const viewSizeMax = useViewSizeMax()
 const viewSizeCurrent = computed(() => {
   return Math.min(unref(viewSizeMax), viewSize)
 })
-const { isSideBarOpen } = useSideBar()
+const sidebarStore = useSideBar()
+const { isSideBarOpen } = storeToRefs(sidebarStore)
 const {
   disabledResources,
   isResourceSelected,
diff --git a/packages/web-pkg/src/components/SideBar/FileSideBar.vue b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
index 0b6e66dac2..ecc2dd2942 100644
--- a/packages/web-pkg/src/components/SideBar/FileSideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/FileSideBar.vue
@@ -3,15 +3,11 @@
     v-if="isOpen"
     ref="sidebar"
     class="files-side-bar z-30"
-    :is-open="isOpen"
-    :active-panel="activePanel"
     :available-panels="availablePanels"
     :panel-context="panelContext"
     :loading="isLoading"
     v-bind="$attrs"
     data-custom-key-bindings-disabled="true"
-    @select-panel="setActiveSideBarPanel"
-    @close="closeSideBar"
   >
     <template #rootHeader>
       <file-info v-if="isFileHeaderVisible" class="px-2 pt-2" :is-sub-panel-active="false" />
@@ -38,9 +34,7 @@ import {
 } from '../../router'
 import {
   SidebarPanelExtension,
-  SideBarEventTopics,
   useClientService,
-  useEventBus,
   useRouter,
   useActiveLocation,
   useExtensionRegistry,
@@ -51,7 +45,8 @@ import {
   useConfigStore,
   useAppsStore,
   useCanListShares,
-  useCanListVersions
+  useCanListVersions,
+  useSideBar
 } from '../../composables'
 import {
   isProjectSpaceResource,
@@ -70,20 +65,13 @@ import { storeToRefs } from 'pinia'
 import { useTask } from 'vue-concurrency'
 import { ListPermissionsSpaceRootSelectEnum } from '@opencloud-eu/web-client/graph/generated'
 
-const {
-  isOpen,
-  activePanel = undefined,
-  space = undefined
-} = defineProps<{
-  isOpen: boolean
-  activePanel?: string
+const { space = undefined } = defineProps<{
   space?: SpaceResource
 }>()
 
 const router = useRouter()
 const clientService = useClientService()
 const extensionRegistry = useExtensionRegistry()
-const eventBus = useEventBus()
 const spacesStore = useSpacesStore()
 const sharesStore = useSharesStore()
 const configStore = useConfigStore()
@@ -94,6 +82,9 @@ const { canListVersions } = useCanListVersions()
 const resourcesStore = useResourcesStore()
 const { currentFolder } = storeToRefs(resourcesStore)
 
+const sidebarStore = useSideBar()
+const { isSideBarOpen: isOpen, sideBarActivePanel: activePanel } = storeToRefs(sidebarStore)
+
 const loadedResource = ref<Resource>()
 const versions = ref<Resource[]>([])
 
@@ -133,12 +124,6 @@ const isProjectsLocation = isLocationSpacesActive(router, 'files-spaces-projects
 const isFavoritesLocation = useActiveLocation(isLocationCommonActive, 'files-common-favorites')
 const isSearchLocation = useActiveLocation(isLocationCommonActive, 'files-common-search')
 
-const closeSideBar = () => {
-  eventBus.publish(SideBarEventTopics.close)
-}
-const setActiveSideBarPanel = (panelName: string) => {
-  eventBus.publish(SideBarEventTopics.setActivePanel, panelName)
-}
 const isFileHeaderVisible = computed(() => {
   return (
     unref(panelContext).items?.length === 1 && !isProjectSpaceResource(unref(panelContext).items[0])
@@ -319,7 +304,7 @@ watch(
       return
     }
 
-    if (!isOpen) {
+    if (!unref(isOpen)) {
       currentResourceMtime.value = undefined
       versions.value = []
       return
@@ -357,7 +342,7 @@ const panelItemIds = computed(() => unref(panelContext).items.map((item) => item
 watch(
   () => [panelItemIds, isOpen],
   async () => {
-    if (!isOpen || !unref(panelContext).items?.length) {
+    if (!unref(isOpen) || !unref(panelContext).items?.length) {
       sharesStore.pruneShares()
       loadedResource.value = null
       return
@@ -426,14 +411,12 @@ provide(
   'space',
   computed(() => space)
 )
-provide(
-  'activePanel',
-  computed(() => activePanel)
-)
 provide('availableInternalShareRoles', readonly(availableInternalShareRoles))
 provide('availableExternalShareRoles', readonly(availableExternalShareRoles))
 provide(
   'versionsLoading',
   computed(() => loadVersionsTask.isRunning)
 )
+/** @deprecated use from useSideBar instead */
+provide('activePanel', activePanel)
 </script>
diff --git a/packages/web-pkg/src/components/SideBar/SideBar.vue b/packages/web-pkg/src/components/SideBar/SideBar.vue
index 9e91f8c2d0..7a056feee3 100644
--- a/packages/web-pkg/src/components/SideBar/SideBar.vue
+++ b/packages/web-pkg/src/components/SideBar/SideBar.vue
@@ -12,7 +12,7 @@
         :panel-context="panelContext"
         :active-panel="activePanel"
         @select-panel="setSidebarPanel"
-        @close="emit('close')"
+        @close="closeSideBar"
         @close-panel="focusSidebar"
       >
         <template #body>
@@ -34,19 +34,13 @@ import { computed, onUnmounted, unref, useAttrs } from 'vue'
 import { SideBarPanel, SideBarPanelContext } from './types'
 import SideBarPanels from './SideBarPanels.vue'
 import { useIsMobile } from '@opencloud-eu/design-system/composables'
-import { SideBarEventTopics, useEventBus, useSideBar } from '../../composables'
+import { useSideBar } from '../../composables'
+import { storeToRefs } from 'pinia'
 
-const {
-  loading,
-  availablePanels,
-  panelContext,
-  activePanel = ''
-} = defineProps<{
-  isOpen: boolean
+const { loading, availablePanels, panelContext } = defineProps<{
   loading: boolean
   availablePanels: SideBarPanel<unknown, unknown, unknown>[]
   panelContext: SideBarPanelContext<unknown, unknown, unknown>
-  activePanel?: string
 }>()
 
 const emit = defineEmits<{
@@ -64,8 +58,9 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 
 const { isMobile } = useIsMobile()
-const eventBus = useEventBus()
-const { focusSidebar } = useSideBar()
+const sidebarStore = useSideBar()
+const { focusSidebar } = sidebarStore
+const { sideBarActivePanel: activePanel } = storeToRefs(sidebarStore)
 
 const sidebarProps = computed(() => {
   if (unref(isMobile)) {
@@ -111,21 +106,22 @@ const onBottomDrawerClicked = (event: MouseEvent) => {
   const actionPanelItemClicked = (event.target as HTMLElement).closest('ul.sidebar-actions-panel')
   if (bottomDrawerOutsideClicked || linkClicked || actionPanelItemClicked) {
     // in some scenarios we want to close the bottom drawer, e.g. when clicking outside or on a file action
-    closeSidebar()
+    closeSideBar()
   }
 }
-const closeSidebar = () => {
-  eventBus.publish(SideBarEventTopics.close)
+const closeSideBar = () => {
+  sidebarStore.closeSideBar()
   emit('close')
 }
 const setSidebarPanel = (panel: string) => {
+  sidebarStore.openSideBarPanel(panel)
   emit('selectPanel', panel)
 }
 
 onUnmounted(() => {
   if (unref(isMobile)) {
     // in mobile, when the sidebar is unmounted, we assume a route change > close bottom drawer
-    closeSidebar()
+    closeSideBar()
   }
 })
 </script>
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
index 89023d8111..3a2704fc9f 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
@@ -19,7 +19,7 @@
         appearance="raw"
         :aria-label="openSharesPanelMembersHint"
         no-hover
-        @click="expandSharesPanel"
+        @click="openSideBarPanel('space-share')"
       >
         <oc-icon name="group" size="small" fill-type="line" />
       </oc-button>
@@ -28,7 +28,7 @@
         appearance="raw"
         :aria-label="openSharesPanelLinkHint"
         no-hover
-        @click="expandSharesPanel"
+        @click="openSideBarPanel('space-share')"
       >
         <oc-icon name="link" size="small" fill-type="line" />
       </oc-button>
@@ -38,7 +38,7 @@
         :aria-label="openSharesPanelHint"
         size="small"
         no-hover
-        @click="expandSharesPanel"
+        @click="openSideBarPanel('space-share')"
       >
         <span class="text-sm" v-text="$gettext('Show')" />
       </oc-button>
@@ -84,19 +84,18 @@ import {
   SpaceResource
 } from '@opencloud-eu/web-client'
 import {
-  SideBarEventTopics,
   useLoadPreview,
   useResourceContents,
   useResourcesStore,
   useRouter,
   useSharesStore,
+  useSideBar,
   useSpacesStore,
   useUserStore
 } from '../../../../composables'
 import SpaceQuota from '../../../SpaceQuota.vue'
 import WebDavDetails from '../../WebDavDetails.vue'
 import { formatDateFromISO, formatFileSize } from '../../../../helpers'
-import { eventBus } from '../../../../services/eventBus'
 import { ImageDimension } from '../../../../constants'
 import { ProcessorType } from '../../../../services'
 import { isLocationSpacesActive } from '../../../../router'
@@ -112,6 +111,7 @@ const { resourceContentsText } = useResourceContents({ showSizeInformation: fals
 const router = useRouter()
 const { $gettext, $ngettext, current: currentLanguage } = useGettext()
 const { loadPreview } = useLoadPreview()
+const { openSideBarPanel } = useSideBar()
 const spacesStore = useSpacesStore()
 const { imagesLoading } = storeToRefs(spacesStore)
 
@@ -246,8 +246,4 @@ const linkShareLabel = computed(() => {
     { linkShareCount: unref(linkShareCount).toString() }
   )
 })
-
-const expandSharesPanel = () => {
-  eventBus.publish(SideBarEventTopics.setActivePanel, 'space-share')
-}
 </script>
diff --git a/packages/web-pkg/src/components/ViewOptions.vue b/packages/web-pkg/src/components/ViewOptions.vue
index 7289540727..1acd552a87 100644
--- a/packages/web-pkg/src/components/ViewOptions.vue
+++ b/packages/web-pkg/src/components/ViewOptions.vue
@@ -195,7 +195,8 @@ const {
 const router = useRouter()
 const currentRoute = useRoute()
 const { $gettext } = useGettext()
-const { isSideBarOpen } = useSideBar()
+const sidebarStore = useSideBar()
+const { isSideBarOpen } = storeToRefs(sidebarStore)
 
 const resourcesStore = useResourcesStore()
 const {
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsShowActions.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsShowActions.ts
index 89a0d6be2f..c29e3bc204 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsShowActions.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsShowActions.ts
@@ -1,6 +1,5 @@
 import { isLocationTrashActive } from '../../../router'
-import { eventBus } from '../../../services/eventBus'
-import { SideBarEventTopics } from '../../sideBar'
+import { useSideBar } from '../../piniaStores'
 import { computed, unref } from 'vue'
 import { useIsFilesAppActive } from '../helpers'
 import { useRouter } from '../../router'
@@ -11,6 +10,7 @@ export const useFileActionsShowActions = () => {
   const router = useRouter()
   const { $gettext } = useGettext()
   const isFilesAppActive = useIsFilesAppActive()
+  const { openSideBarPanel } = useSideBar()
 
   const handler = () => {
     // we don't have details in the trashbin, yet. the actions panel is the default
@@ -18,7 +18,7 @@ export const useFileActionsShowActions = () => {
     // unconditionally return hardcoded `actions` once we have a dedicated
     // details panel in trashbins.
     const panelName = isLocationTrashActive(router, 'files-trash-generic') ? null : 'actions'
-    eventBus.publish(SideBarEventTopics.openWithPanel, panelName)
+    openSideBarPanel(panelName)
   }
 
   const actions = computed((): FileAction[] => [
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsShowDetails.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsShowDetails.ts
index bf74d62273..08656eeb3d 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsShowDetails.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsShowDetails.ts
@@ -1,16 +1,14 @@
 import { isLocationTrashActive } from '../../../router'
-import { eventBus } from '../../../services/eventBus'
-import { SideBarEventTopics } from '../../sideBar'
 import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouter } from '../../router'
 import { FileAction } from '../types'
-import { useResourcesStore } from '../../piniaStores'
+import { useResourcesStore, useSideBar } from '../../piniaStores'
 
 export const useFileActionsShowDetails = () => {
   const router = useRouter()
   const resourcesStore = useResourcesStore()
-
+  const { openSideBar } = useSideBar()
   const { $gettext } = useGettext()
 
   const actions = computed((): FileAction[] => [
@@ -29,7 +27,7 @@ export const useFileActionsShowDetails = () => {
       },
       handler({ resources }) {
         resourcesStore.setSelection(resources.map(({ id }) => id))
-        eventBus.publish(SideBarEventTopics.open)
+        openSideBar()
       }
     }
   ])
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsShowShares.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsShowShares.ts
index 131aa0b115..0494a17c7e 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsShowShares.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsShowShares.ts
@@ -1,21 +1,19 @@
 import { isLocationTrashActive } from '../../../router'
 import { ShareResource } from '@opencloud-eu/web-client'
-import { eventBus } from '../../../services'
-import { SideBarEventTopics } from '../../sideBar'
 import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useRouter } from '../../router'
 import { FileAction } from '../types'
 import { FileActionOptionsWithEvent } from './useFileActions'
 import { useCanShare } from '../../shares'
-import { useResourcesStore } from '../../piniaStores'
+import { useSideBar } from '../../piniaStores'
 import { useInterceptModifierClick } from '../../keyboardActions'
 
 export const useFileActionsShowShares = () => {
   const router = useRouter()
   const { $gettext } = useGettext()
   const { canShare } = useCanShare()
-  const resourcesStore = useResourcesStore()
+  const { openSideBarPanel } = useSideBar()
   const { interceptModifierClick } = useInterceptModifierClick()
 
   const handler = ({ resources, event }: FileActionOptionsWithEvent) => {
@@ -25,7 +23,7 @@ export const useFileActionsShowShares = () => {
       return
     }
 
-    eventBus.publish(SideBarEventTopics.openWithPanel, 'sharing#peopleShares')
+    openSideBarPanel('sharing')
   }
 
   const actions = computed((): FileAction<ShareResource>[] => [
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsShowMembers.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsShowMembers.ts
index c80dbeb4ac..02c18d6a20 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsShowMembers.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsShowMembers.ts
@@ -1,17 +1,16 @@
-import { eventBus } from '../../../services/eventBus'
-import { SideBarEventTopics } from '../../sideBar'
 import { computed } from 'vue'
 import { SpaceAction, SpaceActionOptions } from '../types'
 import { useGettext } from 'vue3-gettext'
-import { useResourcesStore } from '../../piniaStores'
+import { useResourcesStore, useSideBar } from '../../piniaStores'
 
 export const useSpaceActionsShowMembers = () => {
   const { $gettext } = useGettext()
   const resourcesStore = useResourcesStore()
+  const { openSideBarPanel } = useSideBar()
 
   const handler = ({ resources }: SpaceActionOptions) => {
     resourcesStore.setSelection(resources.map(({ id }) => id))
-    eventBus.publish(SideBarEventTopics.openWithPanel, 'space-share')
+    openSideBarPanel('space-share')
   }
 
   const actions = computed((): SpaceAction[] => [
diff --git a/packages/web-pkg/src/composables/actions/useActionsShowDetails.ts b/packages/web-pkg/src/composables/actions/useActionsShowDetails.ts
index 2c995514e4..0c5792928a 100644
--- a/packages/web-pkg/src/composables/actions/useActionsShowDetails.ts
+++ b/packages/web-pkg/src/composables/actions/useActionsShowDetails.ts
@@ -1,18 +1,18 @@
 import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { eventBus } from '../../services'
-import { SideBarEventTopics } from '../sideBar'
+import { useSideBar } from '../piniaStores'
 import { Action } from './types'
 
 export const useActionsShowDetails = () => {
   const { $gettext } = useGettext()
+  const { openSideBar } = useSideBar()
 
   const actions = computed((): Action[] => [
     {
       name: 'show-details',
       icon: 'information',
       label: () => $gettext('Details'),
-      handler: () => eventBus.publish(SideBarEventTopics.open),
+      handler: () => openSideBar(),
       isVisible: ({ resources }) => {
         return (resources as unknown[]).length > 0
       },
diff --git a/packages/web-pkg/src/composables/index.ts b/packages/web-pkg/src/composables/index.ts
index d1196cec15..99e56f4508 100644
--- a/packages/web-pkg/src/composables/index.ts
+++ b/packages/web-pkg/src/composables/index.ts
@@ -31,7 +31,6 @@ export * from './search'
 export * from './selection'
 export * from './service'
 export * from './shares'
-export * from './sideBar'
 export * from './sort'
 export * from './spaces'
 export * from './upload'
diff --git a/packages/web-pkg/src/composables/piniaStores/index.ts b/packages/web-pkg/src/composables/piniaStores/index.ts
index a6575be172..86f8769def 100644
--- a/packages/web-pkg/src/composables/piniaStores/index.ts
+++ b/packages/web-pkg/src/composables/piniaStores/index.ts
@@ -1,17 +1,18 @@
 export * from './apps'
 export * from './auth'
+export * from './avatars'
 export * from './capabilities'
 export * from './clipboard'
 export * from './config'
 export * from './extensionRegistry'
+export * from './groupwareConfig'
 export * from './messages'
 export * from './modals'
 export * from './resources'
 export * from './shares'
+export * from './sideBar'
 export * from './spaces'
 export * from './theme'
+export * from './updates'
 export * from './user'
 export * from './webWorkers'
-export * from './avatars'
-export * from './updates'
-export * from './groupwareConfig'
diff --git a/packages/web-pkg/src/composables/sideBar/useSideBar.ts b/packages/web-pkg/src/composables/piniaStores/sideBar.ts
similarity index 51%
rename from packages/web-pkg/src/composables/sideBar/useSideBar.ts
rename to packages/web-pkg/src/composables/piniaStores/sideBar.ts
index 4d2692c20d..1119e13d36 100644
--- a/packages/web-pkg/src/composables/sideBar/useSideBar.ts
+++ b/packages/web-pkg/src/composables/piniaStores/sideBar.ts
@@ -1,22 +1,26 @@
-import { computed, nextTick, onBeforeUnmount, readonly, ref, unref } from 'vue'
-import { EventBus, eventBus as defaultEventBus } from '../../services/eventBus'
-import { SideBarEventTopics } from './eventTopics'
+import { defineStore } from 'pinia'
+import { computed, nextTick, ref, unref } from 'vue'
+import { eventBus } from '../../services/eventBus'
 import { useLocalStorage } from '../localStorage'
 import { useEmbedMode } from '../embedMode'
 import { useIsMobile } from '@opencloud-eu/design-system/composables'
 
-interface SideBarOptions {
-  bus?: EventBus
+/** @deprecated use exposed methods from the useSideBar instead */
+export enum SideBarEventTopics {
+  open = 'sidebar.open',
+  close = 'sidebar.close',
+  toggle = 'sidebar.toggle',
+  openWithPanel = 'sidebar.openWithPanel',
+  setActivePanel = 'sidebar.setActivePanel'
 }
 
-// FIXME: this should be global store to avoid registering multiple event listeners on the same topics
-// https://github.com/opencloud-eu/web/issues/1397
-export const useSideBar = (options?: SideBarOptions) => {
+export const useSideBar = defineStore('sideBar', () => {
   const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
-  const { isMobile } = useIsMobile()
-  const eventBus = options?.bus || defaultEventBus
   const isSideBarOpenLocalStorage = useLocalStorage(`oc_sideBarOpen`, false)
+  const { isMobile } = useIsMobile()
+
   const isSideBarOpenIsolated = ref(false)
+  const sideBarActivePanel = ref<string | null>(null)
 
   const isSideBarOpen = computed({
     get() {
@@ -46,43 +50,42 @@ export const useSideBar = (options?: SideBarOptions) => {
     appSideBar.focus()
   }
 
-  const sideBarActivePanel = ref<string | null>(null)
-  const toggleSideBarToken = eventBus.subscribe(SideBarEventTopics.toggle, () => {
+  const toggleSideBar = () => {
     isSideBarOpen.value = !unref(isSideBarOpen)
     if (unref(isSideBarOpen)) {
       focusSidebar()
     }
-  })
-  const closeSideBarToken = eventBus.subscribe(SideBarEventTopics.close, () => {
+  }
+  const closeSideBar = () => {
     isSideBarOpen.value = false
     sideBarActivePanel.value = null
-  })
-  const openSideBarToken = eventBus.subscribe(SideBarEventTopics.open, () => {
+  }
+  const openSideBar = () => {
     isSideBarOpen.value = true
     sideBarActivePanel.value = null
     focusSidebar()
-  })
-  const openSideBarWithPanelToken = eventBus.subscribe(
-    SideBarEventTopics.openWithPanel,
-    (panelName: string) => {
-      isSideBarOpen.value = true
-      sideBarActivePanel.value = panelName
-      focusSidebar()
-    }
-  )
-  const setActiveSideBarPanelToken = eventBus.subscribe(
-    SideBarEventTopics.setActivePanel,
-    (panelName: string) => {
-      sideBarActivePanel.value = panelName
+  }
+  const openSideBarPanel = (panelName: string) => {
+    isSideBarOpen.value = true
+    sideBarActivePanel.value = panelName
+    focusSidebar()
+  }
+  const setActiveSideBarPanel = (panelName: string) => {
+    sideBarActivePanel.value = panelName
+  }
+
+  eventBus.subscribe(SideBarEventTopics.toggle, toggleSideBar)
+  eventBus.subscribe(SideBarEventTopics.close, closeSideBar)
+  eventBus.subscribe(SideBarEventTopics.open, openSideBar)
+  eventBus.subscribe(SideBarEventTopics.openWithPanel, openSideBarPanel)
+  eventBus.subscribe(SideBarEventTopics.setActivePanel, setActiveSideBarPanel)
+
+  const onInitialLoad = () => {
+    if (unref(isMobile)) {
+      // close sidebar on mobile devices on initial load because it's a bottom drawer
+      isSideBarOpen.value = false
     }
-  )
-  onBeforeUnmount(() => {
-    eventBus.unsubscribe(SideBarEventTopics.toggle, toggleSideBarToken)
-    eventBus.unsubscribe(SideBarEventTopics.close, closeSideBarToken)
-    eventBus.unsubscribe(SideBarEventTopics.open, openSideBarToken)
-    eventBus.unsubscribe(SideBarEventTopics.openWithPanel, openSideBarWithPanelToken)
-    eventBus.unsubscribe(SideBarEventTopics.setActivePanel, setActiveSideBarPanelToken)
-  })
+  }
 
   const onPanelActive = (name: string, callback: (string: string) => void) => {
     eventBus.subscribe(SideBarEventTopics.setActivePanel, (panelName: string) => {
@@ -96,18 +99,20 @@ export const useSideBar = (options?: SideBarOptions) => {
     })
   }
 
-  const onInitialLoad = () => {
-    if (unref(isMobile)) {
-      // close sidebar on mobile devices on initial load because it's a bottom drawer
-      isSideBarOpen.value = false
-    }
-  }
-
   return {
-    isSideBarOpen: readonly(isSideBarOpen),
-    sideBarActivePanel: readonly(sideBarActivePanel),
-    onPanelActive,
+    isSideBarOpen,
+    sideBarActivePanel,
+    focusSidebar,
     onInitialLoad,
-    focusSidebar
+    toggleSideBar,
+    closeSideBar,
+    openSideBar,
+    openSideBarPanel,
+    setActiveSideBarPanel,
+
+    /** @deprecated */
+    onPanelActive
   }
-}
+})
+
+export type SideBarStore = ReturnType<typeof useSideBar>
diff --git a/packages/web-pkg/src/composables/scrollTo/useScrollTo.ts b/packages/web-pkg/src/composables/scrollTo/useScrollTo.ts
index aa3b9d34af..59cd455a55 100644
--- a/packages/web-pkg/src/composables/scrollTo/useScrollTo.ts
+++ b/packages/web-pkg/src/composables/scrollTo/useScrollTo.ts
@@ -3,8 +3,7 @@ import { Resource } from '@opencloud-eu/web-client'
 import { queryItemAsString } from '../appDefaults/useAppNavigation'
 import { eventBus } from '../../services'
 import { useRouteQuery } from '../router'
-import { SideBarEventTopics } from '../sideBar'
-import { useResourcesStore } from '../piniaStores'
+import { useResourcesStore, useSideBar } from '../piniaStores'
 import { isIncomingShareResource } from '@opencloud-eu/web-client'
 
 export interface ScrollToResult {
@@ -19,6 +18,7 @@ export const useScrollTo = (): ScrollToResult => {
   const scrollToQuery = useRouteQuery('scrollTo')
   const detailsQuery = useRouteQuery('details')
   const resourcesStore = useResourcesStore()
+  const { openSideBarPanel } = useSideBar()
 
   const scrollTo = computed(() => {
     return queryItemAsString(unref(scrollToQuery))
@@ -87,7 +87,7 @@ export const useScrollTo = (): ScrollToResult => {
       scrollToResource(resource.id, { forceScroll: true, topbarElement })
 
       if (unref(details)) {
-        eventBus.publish(SideBarEventTopics.openWithPanel, unref(details))
+        openSideBarPanel(unref(details))
       }
     }
   }
diff --git a/packages/web-pkg/src/composables/sideBar/eventTopics.ts b/packages/web-pkg/src/composables/sideBar/eventTopics.ts
deleted file mode 100644
index 55d98e4c41..0000000000
--- a/packages/web-pkg/src/composables/sideBar/eventTopics.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export enum SideBarEventTopics {
-  open = 'sidebar.open',
-  close = 'sidebar.close',
-  toggle = 'sidebar.toggle',
-  openWithPanel = 'sidebar.openWithPanel',
-  setActivePanel = 'sidebar.setActivePanel'
-}
diff --git a/packages/web-pkg/src/composables/sideBar/index.ts b/packages/web-pkg/src/composables/sideBar/index.ts
deleted file mode 100644
index 9a55f8a62c..0000000000
--- a/packages/web-pkg/src/composables/sideBar/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './eventTopics'
-export * from './useSideBar'
diff --git a/packages/web-pkg/src/helpers/statusIndicators.ts b/packages/web-pkg/src/helpers/statusIndicators.ts
index 6fb4657aa6..c7a5a07cdd 100644
--- a/packages/web-pkg/src/helpers/statusIndicators.ts
+++ b/packages/web-pkg/src/helpers/statusIndicators.ts
@@ -8,11 +8,10 @@ import {
   SpaceResource
 } from '@opencloud-eu/web-client'
 import { eventBus } from '../services'
-import { SideBarEventTopics } from '../composables/sideBar'
 import { AncestorMetaData } from '../types'
 import { User } from '@opencloud-eu/web-client/graph/generated'
 import { IconFillType } from './resource'
-import { useInterceptModifierClick } from '../composables'
+import { useInterceptModifierClick, SideBarEventTopics } from '../composables'
 
 // dummy to trick gettext string extraction into recognizing strings
 const $gettext = (str: string): string => {
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
index 2e4818e6df..ea163e73ed 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
@@ -9,11 +9,10 @@ import {
   SpaceResource
 } from '@opencloud-eu/web-client'
 import { defaultPlugins, mount, PartialComponentProps } from '@opencloud-eu/web-test-helpers'
-import { CapabilityStore } from '../../../../src/composables/piniaStores'
+import { CapabilityStore, SideBarEventTopics } from '../../../../src/composables/piniaStores'
 import { useCanBeOpenedWithSecureView } from '../../../../src/composables/resources'
 import { displayPositionedDropdown } from '../../../../src/helpers/contextMenuDropdown'
 import { eventBus } from '../../../../src/services/eventBus'
-import { SideBarEventTopics } from '../../../../src/composables/sideBar'
 import { mock } from 'vitest-mock-extended'
 import { computed } from 'vue'
 import { Identity } from '@opencloud-eu/web-client/graph/generated'
diff --git a/packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts b/packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts
index a1b2560876..55252910c9 100644
--- a/packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts
@@ -1,5 +1,6 @@
 import { EventBus } from '../../../../src/services/eventBus'
-import { SideBarEventTopics, useSideBar } from '../../../../src/composables/sideBar'
+import { useSideBar } from '../../../../src/composables/sideBar'
+import { SideBarEventTopics } from '../../../../src/composables/piniaStores'
 import { unref, ref } from 'vue'
 import { getComposableWrapper } from '@opencloud-eu/web-test-helpers'
 import * as localStorage from '../../../../src/composables/localStorage'
diff --git a/packages/web-runtime/src/components/Topbar/SideBarToggle.vue b/packages/web-runtime/src/components/Topbar/SideBarToggle.vue
index b86261c3ae..d66e61f4de 100644
--- a/packages/web-runtime/src/components/Topbar/SideBarToggle.vue
+++ b/packages/web-runtime/src/components/Topbar/SideBarToggle.vue
@@ -7,41 +7,29 @@
     color-role="chrome"
     no-hover
     class="my-2"
-    @click.stop="toggleSideBar"
+    @click.stop="sidebarStore.toggleSideBar()"
   >
     <oc-icon name="side-bar-right" :fill-type="buttonIconFillType" />
   </oc-button>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, unref } from 'vue'
-import { SideBarEventTopics, useEventBus, useSideBar } from '@opencloud-eu/web-pkg'
+<script setup lang="ts">
+import { computed, unref } from 'vue'
+import { useSideBar } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
+import { storeToRefs } from 'pinia'
 
-export default defineComponent({
-  name: 'SideBarToggle',
-  setup() {
-    const eventBus = useEventBus()
-    const { $gettext } = useGettext()
-    const { isSideBarOpen } = useSideBar({ bus: eventBus })
-    const buttonIconFillType = computed(() => {
-      return unref(isSideBarOpen) ? 'fill' : 'line'
-    })
-    const buttonLabel = computed(() => {
-      if (unref(isSideBarOpen)) {
-        return $gettext('Close sidebar to hide details')
-      }
-      return $gettext('Open sidebar to view details')
-    })
-    const toggleSideBar = () => {
-      eventBus.publish(SideBarEventTopics.toggle)
-    }
+const { $gettext } = useGettext()
+const sidebarStore = useSideBar()
+const { isSideBarOpen } = storeToRefs(sidebarStore)
 
-    return {
-      buttonIconFillType,
-      buttonLabel,
-      toggleSideBar
-    }
+const buttonIconFillType = computed(() => {
+  return unref(isSideBarOpen) ? 'fill' : 'line'
+})
+const buttonLabel = computed(() => {
+  if (unref(isSideBarOpen)) {
+    return $gettext('Close sidebar to hide details')
   }
+  return $gettext('Open sidebar to view details')
 })
 </script>
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 9fd2a13418..65dff17b95 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -49,7 +49,8 @@ import {
   Updates,
   useGroupwareConfigStore,
   GroupwareConfigStore,
-  RawGroupwareConfigSchema
+  RawGroupwareConfigSchema,
+  useSideBar
 } from '@opencloud-eu/web-pkg'
 import { authService } from '../services/auth'
 import { init as sentryInit } from '@sentry/vue'
@@ -396,6 +397,7 @@ export const announcePiniaStores = () => {
   const webWorkersStore = useWebWorkersStore()
   const updatesStore = useUpdatesStore()
   const groupwareConfigStore = useGroupwareConfigStore()
+  const sidebarStore = useSideBar()
 
   return {
     appsStore,
@@ -411,7 +413,8 @@ export const announcePiniaStores = () => {
     userStore,
     webWorkersStore,
     updatesStore,
-    groupwareConfigStore
+    groupwareConfigStore,
+    sidebarStore
   }
 }
 
diff --git a/packages/web-runtime/src/layouts/Application.vue b/packages/web-runtime/src/layouts/Application.vue
index fc4246103b..08ad6cbc37 100644
--- a/packages/web-runtime/src/layouts/Application.vue
+++ b/packages/web-runtime/src/layouts/Application.vue
@@ -70,6 +70,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, unref, wa
 import { RouteLocationAsRelativeTyped, useRouter } from 'vue-router'
 import { useGettext } from 'vue3-gettext'
 import { progressBarExtensionPoint } from '../extensionPoints'
+import { storeToRefs } from 'pinia'
 
 const MOBILE_BREAKPOINT = 640
 
@@ -79,7 +80,8 @@ const { $gettext } = useGettext()
 const authStore = useAuthStore()
 const activeApp = useActiveApp()
 const extensionRegistry = useExtensionRegistry()
-const { isSideBarOpen } = useSideBar()
+const sidebarStore = useSideBar()
+const { isSideBarOpen } = storeToRefs(sidebarStore)
 
 const extensionNavItems = computed(() =>
   getExtensionNavItems({ extensionRegistry, appId: unref(activeApp) })

From 091bfd15dcc44227b112ee3ac89167283fbcfbba Mon Sep 17 00:00:00 2001
From: Jannik Stehle <j.stehle@opencloud.eu>
Date: Thu, 29 Jan 2026 16:11:40 +0100
Subject: [PATCH 2/2] test: update unit tests after sidebar store refactor

---
 .../tests/unit/components/AppTemplate.spec.ts |  44 ++---
 .../unit/components/Groups/GroupsList.spec.ts |   8 +-
 .../unit/components/Spaces/SpacesList.spec.ts |   8 +-
 .../unit/components/Users/UsersList.spec.ts   |  13 +-
 .../views/__snapshots__/General.spec.ts.snap  |   2 +-
 .../components/Spaces/SpaceHeader.spec.ts     |  15 +-
 .../__snapshots__/Projects.spec.ts.snap       |   6 +-
 .../trash/__snapshots__/Overview.spec.ts.snap |   6 +-
 .../FilesList/ResourceTable.spec.ts           |   8 +-
 .../components/sidebar/FileSideBar.spec.ts    |   7 +-
 .../files/useFileActionsShowDetails.spec.ts   |   6 +-
 .../composables/piniaStores/sideBar.spec.ts   | 160 +++++++++++++++++
 .../composables/scrollTo/useScrollTo.spec.ts  |   6 +-
 .../composables/sideBar/useSideBar.spec.ts    | 163 ------------------
 .../components/Topbar/SidebarToggle.spec.ts   |  14 +-
 .../__snapshots__/SidebarToggle.spec.ts.snap  |   6 +-
 packages/web-test-helpers/src/mocks/pinia.ts  |   3 +
 17 files changed, 237 insertions(+), 238 deletions(-)
 create mode 100644 packages/web-pkg/tests/unit/composables/piniaStores/sideBar.spec.ts
 delete mode 100644 packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts

diff --git a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
index 56bd3abb2f..264e9eac91 100644
--- a/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/AppTemplate.spec.ts
@@ -6,23 +6,25 @@ import {
   RouteLocation,
   shallowMount
 } from '@opencloud-eu/web-test-helpers'
-import { eventBus, SideBar, useIsTopBarSticky } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
+import { SideBar, useIsTopBarSticky, useSideBar } from '@opencloud-eu/web-pkg'
 import { mock } from 'vitest-mock-extended'
 import { OcBreadcrumb } from '@opencloud-eu/design-system/components'
 
 const stubSelectors = {
   ocBreadcrumb: 'oc-breadcrumb-stub',
   appLoadingSpinner: 'app-loading-spinner-stub',
-  sideBar: 'side-bar-stub',
-  sideBarToggleButton: '#files-toggle-sidebar'
+  sideBar: 'side-bar-stub'
 }
 
 const elSelectors = {
   adminSettingsWrapper: '#admin-settings-view-wrapper'
 }
 
-vi.mock('@opencloud-eu/web-pkg')
+vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
+  ...(await importOriginal<any>()),
+  useIsTopBarSticky: vi.fn(),
+  useAppDefaults: vi.fn(() => ({}))
+}))
 
 describe('AppTemplate', () => {
   describe('loading is true', () => {
@@ -55,28 +57,13 @@ describe('AppTemplate', () => {
   })
   describe('sideBar', () => {
     it('should show when opened', () => {
-      const { wrapper } = getWrapper({ props: { isSideBarOpen: true } })
+      const { wrapper } = getWrapper({ isSideBarOpen: true })
       expect(wrapper.find(stubSelectors.sideBar).exists()).toBeTruthy()
     })
     it('should not show when closed', () => {
-      const { wrapper } = getWrapper({ props: { isSideBarOpen: false } })
+      const { wrapper } = getWrapper({ isSideBarOpen: false })
       expect(wrapper.find(stubSelectors.sideBar).exists()).toBeFalsy()
     })
-    it('can be closed', () => {
-      const eventSpy = vi.spyOn(eventBus, 'publish')
-      const { wrapper } = getWrapper()
-      wrapper.findComponent<typeof SideBar>(stubSelectors.sideBar).vm.$emit('close')
-      expect(eventSpy).toHaveBeenCalledWith(SideBarEventTopics.close)
-    })
-    it('panel can be selected', () => {
-      const eventSpy = vi.spyOn(eventBus, 'publish')
-      const panelName = 'SomePanel'
-      const { wrapper } = getWrapper()
-      wrapper
-        .findComponent<typeof SideBar>(stubSelectors.sideBar)
-        .vm.$emit('selectPanel', panelName)
-      expect(eventSpy).toHaveBeenCalledWith(SideBarEventTopics.setActivePanel, panelName)
-    })
   })
   describe('property propagation', () => {
     describe('oc breadcrumb component', () => {
@@ -101,9 +88,6 @@ describe('AppTemplate', () => {
             sideBarAvailablePanels: [{ app: 'DetailsPanel' }]
           }
         })
-        expect(
-          wrapper.findComponent<typeof SideBar>(stubSelectors.sideBar).props().activePanel
-        ).toEqual('DetailsPanel')
         expect(
           wrapper.findComponent<typeof SideBar>(stubSelectors.sideBar).props().availablePanels
         ).toEqual([{ app: 'DetailsPanel' }])
@@ -112,21 +96,23 @@ describe('AppTemplate', () => {
   })
 })
 
-function getWrapper({ props = {}, isMobileWidth = false } = {}) {
+function getWrapper({ props = {}, isMobileWidth = false, isSideBarOpen = true } = {}) {
   vi.mocked(useIsTopBarSticky).mockReturnValue({ isSticky: ref(true) })
 
+  const plugins = [...defaultPlugins()]
+  const sideBarStore = useSideBar()
+  sideBarStore.isSideBarOpen = isSideBarOpen
+
   return {
     wrapper: shallowMount(AppTemplate, {
       props: {
         loading: false,
         breadcrumbs: [],
-        isSideBarOpen: true,
         sideBarAvailablePanels: [],
-        sideBarActivePanel: '',
         ...props
       },
       global: {
-        plugins: [...defaultPlugins()],
+        plugins,
         provide: { isMobileWidth: ref(isMobileWidth) },
         stubs: {
           OcButton: false
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
index 35ba52d3e9..a6f1e9067b 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/GroupsList.spec.ts
@@ -5,8 +5,7 @@ import {
   mount,
   shallowMount
 } from '@opencloud-eu/web-test-helpers'
-import { displayPositionedDropdown, eventBus, queryItemAsString } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
+import { displayPositionedDropdown, queryItemAsString, useSideBar } from '@opencloud-eu/web-pkg'
 import { useGroupSettingsStore } from '../../../../src/composables'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
 
@@ -80,10 +79,11 @@ describe('GroupsList', () => {
   })
   it('should show the group details on details button click', async () => {
     const groups = getGroupMocks()
-    const eventBusSpy = vi.spyOn(eventBus, 'publish')
     const { wrapper } = getWrapper({ mountType: mount, groups })
+
+    const { openSideBar } = useSideBar()
     await wrapper.find('.groups-table-btn-details').trigger('click')
-    expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
+    expect(openSideBar).toHaveBeenCalled()
   })
   describe('toggle selection', () => {
     describe('selectGroups method', () => {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
index 473ac71c87..a1dd06d461 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
@@ -5,9 +5,8 @@ import {
   mount,
   shallowMount
 } from '@opencloud-eu/web-test-helpers'
-import { eventBus, queryItemAsString } from '@opencloud-eu/web-pkg'
+import { queryItemAsString, useSideBar } from '@opencloud-eu/web-pkg'
 import { displayPositionedDropdown } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
 import { nextTick } from 'vue'
 import { useSpaceSettingsStore } from '../../../../src/composables'
 import { mock } from 'vitest-mock-extended'
@@ -143,10 +142,11 @@ describe('SpacesList', () => {
     expect(spyDisplayPositionedDropdown).toHaveBeenCalledTimes(1)
   })
   it('should show the space details on details button click', async () => {
-    const eventBusSpy = vi.spyOn(eventBus, 'publish')
     const { wrapper } = getWrapper({ spaces: spaceMocks })
+
+    const { openSideBar } = useSideBar()
     await wrapper.find('.spaces-table-btn-details').trigger('click')
-    expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
+    expect(openSideBar).toHaveBeenCalled()
   })
   describe('toggle selection', () => {
     describe('selectSpaces method', () => {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
index 9349502ea1..c5eb4413ae 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/UsersList.spec.ts
@@ -5,8 +5,7 @@ import {
   mount,
   shallowMount
 } from '@opencloud-eu/web-test-helpers'
-import { displayPositionedDropdown, eventBus, queryItemAsString } from '@opencloud-eu/web-pkg'
-import { SideBarEventTopics } from '@opencloud-eu/web-pkg'
+import { displayPositionedDropdown, queryItemAsString, useSideBar } from '@opencloud-eu/web-pkg'
 import { useUserSettingsStore } from '../../../../src/composables/stores/userSettings'
 import { User } from '@opencloud-eu/web-client/graph/generated'
 
@@ -110,17 +109,19 @@ describe('UsersList', () => {
   })
   it('should show the user details on details button click', async () => {
     const users = getUserMocks()
-    const eventBusSpy = vi.spyOn(eventBus, 'publish')
     const { wrapper } = getWrapper({ mountType: mount, users })
+
+    const { openSideBar } = useSideBar()
     await wrapper.find('.users-table-btn-details').trigger('click')
-    expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.open)
+    expect(openSideBar).toHaveBeenCalled()
   })
   it('should show the user edit panel on edit button click', async () => {
     const users = getUserMocks()
-    const eventBusSpy = vi.spyOn(eventBus, 'publish')
     const { wrapper } = getWrapper({ mountType: mount, users })
+
+    const { openSideBarPanel } = useSideBar()
     await wrapper.find('.users-table-btn-edit').trigger('click')
-    expect(eventBusSpy).toHaveBeenCalledWith(SideBarEventTopics.openWithPanel, 'EditPanel')
+    expect(openSideBarPanel).toHaveBeenCalledWith('EditPanel')
   })
   describe('toggle selection', () => {
     describe('selectUsers method', () => {
diff --git a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/General.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/General.spec.ts.snap
index 348523ebcf..7d582c0009 100644
--- a/packages/web-app-admin-settings/tests/unit/views/__snapshots__/General.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/views/__snapshots__/General.spec.ts.snap
@@ -2,6 +2,6 @@
 
 exports[`General view > renders component 1`] = `
 "<div>
-  <app-template-stub breadcrumbs="[object Object]" issidebaropen="false" sidebaravailablepanels="[object Object]" sidebarpanelcontext="[object Object]" loading="false" sidebarloading="false" showviewoptions="false" showbatchactions="false" batchactionitems="" batchactions="" showappbar="false"></app-template-stub>
+  <app-template-stub breadcrumbs="[object Object]" sidebaravailablepanels="[object Object]" sidebarpanelcontext="[object Object]" loading="false" sidebarloading="false" showviewoptions="false" showbatchactions="false" batchactionitems="" batchactions="" showappbar="false"></app-template-stub>
 </div>"
 `;
diff --git a/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts b/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
index c8a58c1f81..56b8f1bd20 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
@@ -6,6 +6,7 @@ import { defaultPlugins, mount, defaultComponentMocks } from '@opencloud-eu/web-
 import { mock } from 'vitest-mock-extended'
 import { GetFileContentsResponse } from '@opencloud-eu/web-client/webdav'
 import { flushPromises } from '@vue/test-utils'
+import { useSideBar } from '@opencloud-eu/web-pkg'
 
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
@@ -120,16 +121,20 @@ function getWrapper({
     count: memberCount
   })
 
+  const plugins = [
+    ...defaultPlugins({ piniaOptions: { spacesState: { imagesLoading, readmesLoading } } })
+  ]
+
+  const sideBarStore = useSideBar()
+  sideBarStore.isSideBarOpen = isSideBarOpen
+
   return mount(SpaceHeader, {
     props: {
-      space,
-      isSideBarOpen
+      space
     },
     global: {
       mocks,
-      plugins: [
-        ...defaultPlugins({ piniaOptions: { spacesState: { imagesLoading, readmesLoading } } })
-      ],
+      plugins,
       provide: { ...mocks, isMobileWidth: ref(isMobileWidth) },
       stubs: {
         'space-context-actions': true,
diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
index 50195f6a34..5fecc7216d 100644
--- a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`Projects view > different files view states > lists all available proje
 "<div class="flex w-full">
   <div class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0">
     <div id="files-view" class="outline-0 z-0 flex flex-col">
-      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="true" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="true" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
+      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="true" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="true" batchactionsloading="false"></app-bar-stub>
       <div class="spaces-list">
         <div class="flex justify-end flex-wrap items-end mx-4 mb-4">
           <div class="w-3xs"><label class="inline-block mb-0.5" for="spaces-filter">Search
@@ -18,11 +18,11 @@ exports[`Projects view > different files view states > lists all available proje
             <!--v-if-->
           </div>
         </div>
-        <resource-table-stub resources="[object Object],[object Object]" resourcedomselector="[Function]" arepathsdisplayed="false" selectedids="" hasactions="true" showrenamequickaction="true" areresourcesclickable="true" headerposition="0" isselectable="true" issidebaropen="false" dragdrop="false" viewmode="resource-table" hover="true" sortby="name" fieldsdisplayed="image,name,totalQuota,usedQuota,remainingQuota,indicators,mdate" sortdir="asc" resourcetype="space" lazy="true" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" view-size="1"></resource-table-stub>
+        <resource-table-stub resources="[object Object],[object Object]" resourcedomselector="[Function]" arepathsdisplayed="false" selectedids="" hasactions="true" showrenamequickaction="true" areresourcesclickable="true" headerposition="0" isselectable="true" dragdrop="false" viewmode="resource-table" hover="true" sortby="name" fieldsdisplayed="image,name,totalQuota,usedQuota,remainingQuota,indicators,mdate" sortdir="asc" resourcetype="space" lazy="true" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" view-size="1"></resource-table-stub>
       </div>
     </div>
   </div>
   <!--v-if-->
-  <file-side-bar-stub isopen="false"></file-side-bar-stub>
+  <file-side-bar-stub></file-side-bar-stub>
 </div>"
 `;
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index 7c6ab5d8ee..7911138b9b 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
 "<div class="flex w-full">
   <div class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0">
     <div id="files-view" class="outline-0 z-0 flex flex-col">
-      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="false" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
+      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="[object Object]" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="false" batchactionsloading="false"></app-bar-stub>
       <div class="flex justify-end flex-wrap items-end mx-4 mb-4">
         <div class="w-3xs"><label class="inline-block mb-0.5" for="trash-filter">Search
             <!--v-if-->
@@ -17,10 +17,10 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
           <!--v-if-->
         </div>
       </div>
-      <resource-table-stub resources="[object Object],[object Object],[object Object]" resourcedomselector="[Function]" arepathsdisplayed="false" selectedids="" hasactions="true" showrenamequickaction="false" areresourcesclickable="true" headerposition="0" isselectable="false" issidebaropen="false" dragdrop="false" viewmode="resource-table" hover="true" sortby="name" fieldsdisplayed="name" sortdir="asc" resourcetype="file" lazy="true" class="trash-table" sort-fields="" are-thumbnails-displayed="false" view-size="1"></resource-table-stub>
+      <resource-table-stub resources="[object Object],[object Object],[object Object]" resourcedomselector="[Function]" arepathsdisplayed="false" selectedids="" hasactions="true" showrenamequickaction="false" areresourcesclickable="true" headerposition="0" isselectable="false" dragdrop="false" viewmode="resource-table" hover="true" sortby="name" fieldsdisplayed="name" sortdir="asc" resourcetype="file" lazy="true" class="trash-table" sort-fields="" are-thumbnails-displayed="false" view-size="1"></resource-table-stub>
     </div>
   </div>
   <!--v-if-->
-  <file-side-bar-stub isopen="false" activepanel=""></file-side-bar-stub>
+  <file-side-bar-stub></file-side-bar-stub>
 </div>"
 `;
diff --git a/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts b/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
index ea163e73ed..5d572b2c68 100644
--- a/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
+++ b/packages/web-pkg/tests/unit/components/FilesList/ResourceTable.spec.ts
@@ -9,10 +9,9 @@ import {
   SpaceResource
 } from '@opencloud-eu/web-client'
 import { defaultPlugins, mount, PartialComponentProps } from '@opencloud-eu/web-test-helpers'
-import { CapabilityStore, SideBarEventTopics } from '../../../../src/composables/piniaStores'
+import { CapabilityStore, useSideBar } from '../../../../src/composables/piniaStores'
 import { useCanBeOpenedWithSecureView } from '../../../../src/composables/resources'
 import { displayPositionedDropdown } from '../../../../src/helpers/contextMenuDropdown'
-import { eventBus } from '../../../../src/services/eventBus'
 import { mock } from 'vitest-mock-extended'
 import { computed } from 'vue'
 import { Identity } from '@opencloud-eu/web-client/graph/generated'
@@ -626,12 +625,13 @@ describe('ResourceTable', () => {
         expect(resourceRow.find('.resource-table-tag-more').exists()).toBe(renderButton)
       })
       it('opens sidebar on click', async () => {
-        const spyBus = vi.spyOn(eventBus, 'publish')
         const resource = mock<Resource>({ id: '1', tags: ['1', '2', '3'] })
         const { wrapper } = getMountedWrapper({ props: { resources: [resource] } })
         const resourceRow = wrapper.find(`[data-item-id="${resource.id}"]`)
+
+        const { openSideBar } = useSideBar()
         await resourceRow.find('.resource-table-tag-more').trigger('click')
-        expect(spyBus).toHaveBeenCalledWith(SideBarEventTopics.open)
+        expect(openSideBar).toHaveBeenCalled()
       })
     })
   })
diff --git a/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
index ea3e147a80..08e94cf4c7 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/FileSideBar.spec.ts
@@ -13,7 +13,8 @@ import {
   useAppsStore,
   useExtensionRegistry,
   useResourcesStore,
-  useSharesStore
+  useSharesStore,
+  useSideBar
 } from '../../../../src/composables/piniaStores'
 import { AncestorMetaDataValue } from '../../../../src'
 
@@ -272,6 +273,9 @@ function createWrapper({
   const { requestExtensions } = useExtensionRegistry()
   vi.mocked(requestExtensions).mockReturnValue([])
 
+  const sideBarStore = useSideBar()
+  sideBarStore.isSideBarOpen = isOpen
+
   const useSelectedResourcesMock = mock<ReturnType<typeof useSelectedResources>>()
   useSelectedResourcesMock.selectedResources = item ? ref([item]) : ref([])
   vi.mocked(useSelectedResources).mockReturnValue(useSelectedResourcesMock)
@@ -283,7 +287,6 @@ function createWrapper({
     mocks,
     wrapper: shallowMount(FileSideBar, {
       props: {
-        isOpen,
         space
       },
       global: {
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsShowDetails.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsShowDetails.spec.ts
index 1b85d55d4a..a207456856 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsShowDetails.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsShowDetails.spec.ts
@@ -1,4 +1,4 @@
-import { SideBarEventTopics, eventBus, useFileActionsShowDetails } from '../../../../../src'
+import { useFileActionsShowDetails, useSideBar } from '../../../../../src'
 import { defaultComponentMocks, getComposableWrapper } from '@opencloud-eu/web-test-helpers'
 import { unref } from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
@@ -11,10 +11,10 @@ describe('showDetails', () => {
         () => {
           const { actions } = useFileActionsShowDetails()
 
-          const busStub = vi.spyOn(eventBus, 'publish')
+          const { openSideBar } = useSideBar()
           const resources = [{ id: '1', path: '/folder' }] as Resource[]
           unref(actions)[0].handler({ space: null, resources })
-          expect(busStub).toHaveBeenCalledWith(SideBarEventTopics.open)
+          expect(openSideBar).toHaveBeenCalled()
         },
         { mocks, provide: mocks }
       )
diff --git a/packages/web-pkg/tests/unit/composables/piniaStores/sideBar.spec.ts b/packages/web-pkg/tests/unit/composables/piniaStores/sideBar.spec.ts
new file mode 100644
index 0000000000..ac9a8464ae
--- /dev/null
+++ b/packages/web-pkg/tests/unit/composables/piniaStores/sideBar.spec.ts
@@ -0,0 +1,160 @@
+import { useSideBar } from '../../../../src/composables/piniaStores'
+import { ref } from 'vue'
+import { getComposableWrapper } from '@opencloud-eu/web-test-helpers'
+import * as localStorage from '../../../../src/composables/localStorage'
+import { createPinia, setActivePinia } from 'pinia'
+import { useEmbedMode } from '../../../../src/composables/embedMode'
+import { mock } from 'vitest-mock-extended'
+
+vi.mock('../../../../src/composables/embedMode')
+
+const localStorageSpy = vi
+  .spyOn(localStorage, 'useLocalStorage')
+  .mockImplementation(() => ref(false))
+
+describe('useSideBar', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('initial state', () => {
+    it('should have "isSideBarOpen" as "false"', () => {
+      getWrapper({
+        setup: (instance) => {
+          expect(instance.isSideBarOpen).toBeFalsy()
+        }
+      })
+    })
+    it('should have "sideBarActivePanel" as "null"', () => {
+      getWrapper({
+        setup: (instance) => {
+          expect(instance.sideBarActivePanel).toBeNull()
+        }
+      })
+    })
+  })
+  describe('open', () => {
+    it('should set "isSideBarOpen" to "true"', () => {
+      getWrapper({
+        setup: (instance) => {
+          instance.openSideBar()
+          expect(instance.isSideBarOpen).toBeTruthy()
+        }
+      })
+    })
+    it('should set "sideBarActivePanel" to "null"', () => {
+      getWrapper({
+        setup: (instance) => {
+          instance.openSideBar()
+          expect(instance.sideBarActivePanel).toBeNull()
+        }
+      })
+    })
+  })
+  describe('close', () => {
+    it('should set "isSideBarOpen" to "false"', () => {
+      getWrapper({
+        setup: (instance) => {
+          instance.closeSideBar()
+          expect(instance.isSideBarOpen).toBeFalsy()
+        }
+      })
+    })
+    it('should set "sideBarActivePanel" to "null"', () => {
+      getWrapper({
+        setup: (instance) => {
+          instance.closeSideBar()
+          expect(instance.sideBarActivePanel).toBeNull()
+        }
+      })
+    })
+  })
+  describe('toggle', () => {
+    it('should toggle "isSideBarOpen" back and forth', () => {
+      getWrapper({
+        setup: (instance) => {
+          expect(instance.isSideBarOpen).toBeFalsy()
+          instance.toggleSideBar()
+          expect(instance.isSideBarOpen).toBeTruthy()
+          instance.toggleSideBar()
+          expect(instance.isSideBarOpen).toBeFalsy()
+        }
+      })
+    })
+    it('should not influence "sideBarActivePanel"', () => {
+      getWrapper({
+        setup: (instance) => {
+          expect(instance.sideBarActivePanel).toBeNull()
+          instance.setActiveSideBarPanel('SomePanel')
+          expect(instance.sideBarActivePanel).toBe('SomePanel')
+          instance.toggleSideBar()
+          expect(instance.sideBarActivePanel).toBe('SomePanel')
+        }
+      })
+    })
+  })
+  describe('openSideBarPanel', () => {
+    it('should set "isSideBarOpen" to "true"', () => {
+      getWrapper({
+        setup: (instance) => {
+          instance.openSideBarPanel('SomePanel')
+          expect(instance.isSideBarOpen).toBeTruthy()
+        }
+      })
+    })
+    it('should set "sideBarActivePanel" to provided value', () => {
+      getWrapper({
+        setup: (instance) => {
+          instance.openSideBarPanel('SomePanel')
+          expect(instance.sideBarActivePanel).toBe('SomePanel')
+        }
+      })
+    })
+  })
+
+  describe('embedMode', () => {
+    beforeEach(() => {
+      localStorageSpy.mockImplementationOnce(() => ref(true))
+    })
+
+    it('should use local ref when embed mode is enabled', () => {
+      getWrapper({
+        setup: (instance) => {
+          expect(instance.isSideBarOpen).toBeFalsy()
+        },
+        embedEnabled: true
+      })
+    })
+
+    it('should use local storage when embed mode is disabled', () => {
+      getWrapper({
+        setup: (instance) => {
+          expect(instance.isSideBarOpen).toBeTruthy()
+        },
+        embedEnabled: false
+      })
+    })
+  })
+})
+
+function getWrapper({
+  setup,
+  embedEnabled = false
+}: {
+  setup: (instance: ReturnType<typeof useSideBar>) => void
+  embedEnabled?: boolean
+}) {
+  vi.mocked(useEmbedMode).mockReturnValue(
+    mock<ReturnType<typeof useEmbedMode>>({ isEnabled: ref(embedEnabled) })
+  )
+
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useSideBar()
+        setup(instance)
+      },
+      { pluginOptions: { pinia: false } }
+    )
+  }
+}
diff --git a/packages/web-pkg/tests/unit/composables/scrollTo/useScrollTo.spec.ts b/packages/web-pkg/tests/unit/composables/scrollTo/useScrollTo.spec.ts
index 52dcc4971c..61c7d239b5 100644
--- a/packages/web-pkg/tests/unit/composables/scrollTo/useScrollTo.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/scrollTo/useScrollTo.spec.ts
@@ -1,12 +1,12 @@
 import { mock } from 'vitest-mock-extended'
 import { useScrollTo } from '../../../../src/composables/scrollTo'
 import { Resource } from '@opencloud-eu/web-client'
-import { eventBus } from '../../../../src/services'
 import {
   getComposableWrapper,
   RouteLocation,
   defaultComponentMocks
 } from '@opencloud-eu/web-test-helpers'
+import { useSideBar } from '../../../../src'
 
 const mockResourceId = 'fakeResourceId'
 const mockFilesTopBar = {
@@ -168,11 +168,11 @@ describe('useScrollTo', () => {
 
       getComposableWrapper(
         () => {
-          const busStub = vi.spyOn(eventBus, 'publish')
           const resource = mock<Resource>({ id: resourceId })
           const { scrollToResourceFromRoute } = useScrollTo()
           scrollToResourceFromRoute([resource], 'files-app-bar')
-          expect(busStub).toHaveBeenCalled()
+          const { openSideBarPanel } = useSideBar()
+          expect(openSideBarPanel).toHaveBeenCalled()
         },
         {
           mocks,
diff --git a/packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts b/packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts
deleted file mode 100644
index 55252910c9..0000000000
--- a/packages/web-pkg/tests/unit/composables/sideBar/useSideBar.spec.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-import { EventBus } from '../../../../src/services/eventBus'
-import { useSideBar } from '../../../../src/composables/sideBar'
-import { SideBarEventTopics } from '../../../../src/composables/piniaStores'
-import { unref, ref } from 'vue'
-import { getComposableWrapper } from '@opencloud-eu/web-test-helpers'
-import * as localStorage from '../../../../src/composables/localStorage'
-
-const localStorageSpy = vi
-  .spyOn(localStorage, 'useLocalStorage')
-  .mockImplementation(() => ref(false))
-
-describe('useSideBar', () => {
-  let eventBus: EventBus
-  beforeEach(() => {
-    eventBus = new EventBus()
-  })
-  describe('initial state', () => {
-    it('should have "isSideBarOpen" as "false"', () => {
-      getComposableWrapper(() => {
-        const { isSideBarOpen } = useSideBar({ bus: eventBus })
-        expect(unref(isSideBarOpen)).toBe(false)
-      })
-    })
-    it('should have "sideBarActivePanel" as "null"', () => {
-      getComposableWrapper(() => {
-        const { sideBarActivePanel } = useSideBar({ bus: eventBus })
-        expect(unref(sideBarActivePanel)).toBeNull()
-      })
-    })
-  })
-  describe('open', () => {
-    it('should set "isSideBarOpen" to "true"', () => {
-      getComposableWrapper(() => {
-        const { isSideBarOpen } = useSideBar({ bus: eventBus })
-        eventBus.publish(SideBarEventTopics.open)
-        expect(unref(isSideBarOpen)).toBe(true)
-      })
-    })
-    it('should set "sideBarActivePanel" to "null"', () => {
-      getComposableWrapper(() => {
-        const { sideBarActivePanel } = useSideBar({ bus: eventBus })
-        eventBus.publish(SideBarEventTopics.open)
-        expect(unref(sideBarActivePanel)).toBeNull()
-      })
-    })
-  })
-  describe('close', () => {
-    it('should set "isSideBarOpen" to "false"', () => {
-      getComposableWrapper(() => {
-        const { isSideBarOpen } = useSideBar({ bus: eventBus })
-        eventBus.publish(SideBarEventTopics.close)
-        expect(unref(isSideBarOpen)).toBe(false)
-      })
-    })
-    it('should set "sideBarActivePanel" to "null"', () => {
-      getComposableWrapper(() => {
-        const { sideBarActivePanel } = useSideBar({ bus: eventBus })
-        eventBus.publish(SideBarEventTopics.close)
-        expect(unref(sideBarActivePanel)).toBeNull()
-      })
-    })
-  })
-  describe('toggle', () => {
-    it('should toggle "isSideBarOpen" back and forth', () => {
-      getComposableWrapper(() => {
-        const { isSideBarOpen } = useSideBar({ bus: eventBus })
-        eventBus.publish(SideBarEventTopics.toggle)
-        expect(unref(isSideBarOpen)).toBe(true)
-        eventBus.publish(SideBarEventTopics.toggle)
-        expect(unref(isSideBarOpen)).toBe(false)
-      })
-    })
-    it('should not influence "sideBarActivePanel"', () => {
-      getComposableWrapper(() => {
-        const { sideBarActivePanel } = useSideBar({ bus: eventBus })
-        // initial state
-        eventBus.publish(SideBarEventTopics.toggle)
-        expect(unref(sideBarActivePanel)).toBe(null)
-        // modified active panel
-        eventBus.publish(SideBarEventTopics.setActivePanel, 'SomePanel')
-        eventBus.publish(SideBarEventTopics.toggle)
-        expect(unref(sideBarActivePanel)).toBe('SomePanel')
-      })
-    })
-  })
-  describe('openWithPanel', () => {
-    it('should set "isSideBarOpen" to "true"', () => {
-      getComposableWrapper(() => {
-        const { isSideBarOpen } = useSideBar({ bus: eventBus })
-        eventBus.publish(SideBarEventTopics.openWithPanel, 'SomePanel')
-        expect(unref(isSideBarOpen)).toBe(true)
-      })
-    })
-    it('should set "sideBarActivePanel" to provided value', () => {
-      getComposableWrapper(() => {
-        const { sideBarActivePanel } = useSideBar({ bus: eventBus })
-        eventBus.publish(SideBarEventTopics.openWithPanel, 'SomePanel')
-        expect(unref(sideBarActivePanel)).toBe('SomePanel')
-      })
-    })
-  })
-  describe('setActivePanel', () => {
-    it('should not influence "isSideBarOpen"', () => {
-      getComposableWrapper(() => {
-        const { isSideBarOpen } = useSideBar({ bus: eventBus })
-        expect(unref(isSideBarOpen)).toBe(false)
-      })
-    })
-    it('should set "sideBarActivePanel" to provided value', () => {
-      getComposableWrapper(() => {
-        const { sideBarActivePanel } = useSideBar({ bus: eventBus })
-        eventBus.publish(SideBarEventTopics.setActivePanel, 'SomePanel')
-        expect(unref(sideBarActivePanel)).toBe('SomePanel')
-      })
-    })
-  })
-
-  describe('embedMode', () => {
-    beforeEach(() => {
-      localStorageSpy.mockImplementationOnce(() => ref(true))
-    })
-
-    it('should use local ref when embed mode is enabled', () => {
-      getComposableWrapper(
-        () => {
-          const { isSideBarOpen } = useSideBar({ bus: eventBus })
-          expect(unref(isSideBarOpen)).toBe(false)
-        },
-        {
-          pluginOptions: {
-            piniaOptions: {
-              configState: {
-                options: {
-                  embed: { enabled: true }
-                }
-              }
-            }
-          }
-        }
-      )
-    })
-
-    it('should use local storage when embed mode is disabled', () => {
-      getComposableWrapper(
-        () => {
-          const { isSideBarOpen } = useSideBar({ bus: eventBus })
-          expect(unref(isSideBarOpen)).toBe(true)
-        },
-        {
-          pluginOptions: {
-            piniaOptions: {
-              configState: {
-                options: {
-                  embed: { enabled: false }
-                }
-              }
-            }
-          }
-        }
-      )
-    })
-  })
-})
diff --git a/packages/web-runtime/tests/unit/components/Topbar/SidebarToggle.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/SidebarToggle.spec.ts
index 1fe7bd11d0..3baba29d9a 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/SidebarToggle.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/SidebarToggle.spec.ts
@@ -1,5 +1,5 @@
+import { useSideBar } from '@opencloud-eu/web-pkg'
 import SidebarToggle from '../../../../src/components/Topbar/SideBarToggle.vue'
-import { eventBus } from '@opencloud-eu/web-pkg/src/services'
 import { defaultPlugins, mount, defaultComponentMocks } from '@opencloud-eu/web-test-helpers'
 
 const selectors = {
@@ -17,21 +17,25 @@ describe('SidebarToggle component', () => {
   )
   it('publishes the toggle-event to the sidebar on click', async () => {
     const { wrapper } = getWrapper()
-    const eventSpy = vi.spyOn(eventBus, 'publish')
+    const { toggleSideBar } = useSideBar()
     await wrapper.find(selectors.toggleSidebarBtn).trigger('click')
-    expect(eventSpy).toHaveBeenCalled()
+    expect(toggleSideBar).toHaveBeenCalled()
   })
 })
 
 function getWrapper({ isSideBarOpen = false } = {}) {
   const mocks = defaultComponentMocks()
+
+  const plugins = [...defaultPlugins()]
+  const sideBarStore = useSideBar()
+  sideBarStore.isSideBarOpen = isSideBarOpen
+
   return {
     mocks,
     wrapper: mount(SidebarToggle, {
-      props: { isSideBarOpen },
       global: {
         mocks,
-        plugins: [...defaultPlugins()]
+        plugins
       }
     })
   }
diff --git a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
index 6b00b841cd..aeba5866b3 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
+++ b/packages/web-runtime/tests/unit/components/Topbar/__snapshots__/SidebarToggle.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 1`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar" issidebaropen="true">
+"<button type="button" aria-label="Close sidebar to hide details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar">
   <!--v-if-->
-  <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
+  <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
         const title = document.createElement(&quot;title&quot;);
         title.setAttribute(&quot;id&quot;, svgTitleId.value);
@@ -16,7 +16,7 @@ exports[`SidebarToggle component > should show the "Toggle sidebar"-button with
 `;
 
 exports[`SidebarToggle component > should show the "Toggle sidebar"-button with sidebar opened and closed 2`] = `
-"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar" issidebaropen="false">
+"<button type="button" aria-label="Open sidebar to view details" class="oc-button-chrome oc-button-raw-inverse oc-button-chrome-raw-inverse gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default my-2" id="files-toggle-sidebar">
   <!--v-if-->
   <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-5.5"><svg data-testid="inline-svg-stub" src="icons/side-bar-right-line.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
diff --git a/packages/web-test-helpers/src/mocks/pinia.ts b/packages/web-test-helpers/src/mocks/pinia.ts
index e13d45c4a9..5ccdbb3912 100644
--- a/packages/web-test-helpers/src/mocks/pinia.ts
+++ b/packages/web-test-helpers/src/mocks/pinia.ts
@@ -72,6 +72,7 @@ export type PiniaMockOptions = {
     userAvatar?: string
     avatarMap?: Record<string, string>
   }
+  sideBarStore?: { sideBarActivePanel?: string | null }
   sharesState?: {
     collaboratorShares?: CollaboratorShare[]
     linkShares?: LinkShare[]
@@ -105,6 +106,7 @@ export function createMockStore({
   userSettingsStore = {},
   groupSettingsStore = {},
   spaceSettingsStore = {},
+  sideBarStore = {},
   sharesState = {},
   spacesState = {},
   userState = {},
@@ -159,6 +161,7 @@ export function createMockStore({
       avatars: {
         ...avatarsStore
       },
+      sideBar: { ...sideBarStore },
       shares: { collaboratorShares: [], linkShares: [], ...sharesState },
       spaces: { spaces: [], ...spacesState },
       userSettings: { users: [], selectedUsers: [], ...userSettingsStore },