feat: move sidebar toggle button into the topbar

owncloud · Dec 11, 2023 · 712e6e4 · 712e6e4
1 parent 6ef6be1
commit 712e6e4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 28 deletions.
diff --git a/packages/web-pkg/src/components/AppBar/SidebarToggle.vue b/packages/web-pkg/src/components/AppBar/SidebarToggle.vue
@@ -17,6 +17,7 @@ import { eventBus } from '../../services/eventBus'
 import { SideBarEventTopics } from '../../composables/sideBar'
 
 export default defineComponent({
+  name: 'SidebarToggle',
   props: {
     isSideBarOpen: {
       type: Boolean,

diff --git a/packages/web-pkg/src/components/AppTopBar.vue b/packages/web-pkg/src/components/AppTopBar.vue
@@ -73,10 +73,6 @@
           </oc-button>
         </div>
       </span>
-      <oc-button @click="toggleSideBar">
-        {{ isSideBarOpen }}
-        <oc-icon name="side-bar-right" />
-      </oc-button>
     </div>
   </portal>
 </template>
@@ -85,14 +81,7 @@
 import { computed, defineComponent, PropType, unref } from 'vue'
 import ContextActionMenu from './ContextActions/ContextActionMenu.vue'
 import { useGettext } from 'vue3-gettext'
-import {
-  Action,
-  SideBarEventTopics,
-  useEventBus,
-  useFolderLink,
-  useGetMatchingSpace,
-  useSideBar
-} from '../composables'
+import { Action, useEventBus, useFolderLink, useGetMatchingSpace } from '../composables'
 import {
   Resource,
   isPublicSpaceResource,
@@ -149,20 +138,13 @@ export default defineComponent({
       return props.resource ? getParentFolderLinkIconAdditionalAttributes(props.resource) : null
     })
 
-    const toggleSideBar = () => {
-      eventBus.publish(SideBarEventTopics.toggle)
-    }
-    const { isSideBarOpen } = useSideBar()
-
     return {
       pathPrefix,
       isPathDisplayed,
       contextMenuLabel,
       closeButtonLabel,
       parentFolderName,
-      parentFolderLinkIconAdditionalAttributes,
-      isSideBarOpen,
-      toggleSideBar
+      parentFolderLinkIconAdditionalAttributes
     }
   }
 })

diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/AppTopBar.spec.ts.snap
@@ -14,7 +14,6 @@ exports[`AppTopBar if a resource is present renders a resource and dropdownActio
         <oc-button-stub appearance="raw-inverse" arialabel="Close" disabled="false" gapsize="medium" id="app-top-bar-close" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="brand"></oc-button-stub>
       </div>
     </span>
-    <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
   </div>
 </portal>
 `;
@@ -33,7 +32,6 @@ exports[`AppTopBar if a resource is present renders a resource and dropdownActio
         <oc-button-stub appearance="raw-inverse" arialabel="Close" disabled="false" gapsize="medium" id="app-top-bar-close" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="brand"></oc-button-stub>
       </div>
     </span>
-    <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
   </div>
 </portal>
 `;
@@ -51,7 +49,6 @@ exports[`AppTopBar if a resource is present renders a resource and mainActions (
         <oc-button-stub appearance="raw-inverse" arialabel="Close" disabled="false" gapsize="medium" id="app-top-bar-close" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="brand"></oc-button-stub>
       </div>
     </span>
-    <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
   </div>
 </portal>
 `;
@@ -69,7 +66,6 @@ exports[`AppTopBar if a resource is present renders a resource and no actions (i
         <oc-button-stub appearance="raw-inverse" arialabel="Close" disabled="false" gapsize="medium" id="app-top-bar-close" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="brand"></oc-button-stub>
       </div>
     </span>
-    <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
   </div>
 </portal>
 `;
@@ -87,7 +83,6 @@ exports[`AppTopBar if no resource is present renders only a close button 1`] = `
         <oc-button-stub appearance="raw-inverse" arialabel="Close" disabled="false" gapsize="medium" id="app-top-bar-close" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="brand"></oc-button-stub>
       </div>
     </span>
-    <oc-button-stub appearance="outline" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
   </div>
 </portal>
 `;
diff --git a/packages/web-runtime/src/components/Topbar/TopBar.vue b/packages/web-runtime/src/components/Topbar/TopBar.vue
@@ -31,6 +31,12 @@
       </portal>
       <portal to="app.runtime.header.right" :order="100">
         <notifications v-if="isNotificationBellEnabled" />
+        <sidebar-toggle
+          :is-side-bar-open="isSideBarOpen"
+          class="oc-p-rm"
+          appearance="raw-inverse"
+          variation="brand"
+        />
         <user-menu :applications-list="userMenuItems" />
       </portal>
     </template>
@@ -54,9 +60,11 @@ import {
   useCapabilityNotifications,
   useEmbedMode,
   useRouter,
+  useSideBar,
   useStore,
   useThemeStore,
-  useUserContext
+  useUserContext,
+  SidebarToggle
 } from '@ownclouders/web-pkg'
 
 export default {
@@ -65,7 +73,8 @@ export default {
     FeedbackLink,
     Notifications,
     ThemeSwitcher,
-    UserMenu
+    UserMenu,
+    SidebarToggle
   },
   props: {
     applicationsList: {
@@ -85,6 +94,7 @@ export default {
     const router = useRouter()
     const ability = useAbility()
     const { isEnabled: isEmbedModeEnabled } = useEmbedMode()
+    const { isSideBarOpen } = useSideBar()
 
     const logoWidth = ref('150px')
     const isNotificationBellEnabled = computed(() => {
@@ -191,7 +201,8 @@ export default {
       userMenuItems,
       appMenuItems,
       logoWidth,
-      isEmbedModeEnabled
+      isEmbedModeEnabled,
+      isSideBarOpen
     }
   },
   computed: {