fix: handle sidebar resizing

Fixed various issues with sidebar resizing. Close button is no longer pushed away, resize event is added, and correct breakpoint is used.

changelog/unreleased/bugfix-do-not-push-sidebar-close-action-away.md

@@ -0,0 +1,6 @@
+Bugfix: Do not push sidebar close action away
+
+We've fixed an issue with the sidebar close action which was pushed away when zooming. The layout of the screen was not adjusting the size and shifted the whole sidebar off the screen. We set a fixed width of 100% - sidebar width to prevent this.
+
+https://github.com/owncloud/web/pull/12045
+https://github.com/owncloud/web/issues/11536

changelog/unreleased/bugfix-update-sidebar-width-on-resize.md

@@ -0,0 +1,5 @@
+Bugfix: Update sidebar width on resize
+
+We've fixed an issue where the width of the sidebar was updated only when opening it. We added a resize event handler to the window object so that we can react to it and update the width accordingly.
+
+https://github.com/owncloud/web/pull/12045

changelog/unreleased/bugfix-use-correct-breakpoints-in-sidebar.md

@@ -0,0 +1,5 @@
+Bugfix: Use correct breakpoints in sidebar
+
+We've set the correct breakpoint used for setting width of the sidebar so that it matches the breakpoint in app wrapper.
+
+https://github.com/owncloud/web/pull/12045

packages/web-pkg/src/components/AppTemplates/AppWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <main :id="applicationId" class="oc-height-1-1" @keydown.esc="closeApp">
+  <main :id="applicationId" class="app-wrapper oc-height-1-1" @keydown.esc="closeApp">
     <h1 class="oc-invisible-sr" v-text="pageTitle" />
     <app-top-bar
       v-if="!loading && !loadingError && resource"
@@ -18,7 +18,7 @@
       class="oc-flex oc-width-1-1 oc-height-1-1"
       :class="{ 'app-sidebar-open': isSideBarOpen }"
     >
-      <slot class="oc-height-1-1 oc-width-1-1" v-bind="slotAttrs" />
+      <slot class="app-wrapper-content oc-height-1-1" v-bind="slotAttrs" />
       <file-side-bar :is-open="isSideBarOpen" :active-panel="sideBarActivePanel" :space="space" />
     </div>
   </main>
@@ -710,4 +710,9 @@ export default defineComponent({
     display: none;
   }
 }
+
+.app-wrapper .app-wrapper-content {
+  // 440px is the width of the app sidebar
+  width: calc(100% - 440px);
+}
 </style>

packages/web-pkg/src/components/SideBar/SideBar.vue

@@ -104,6 +104,7 @@ import {
   defineComponent,
   nextTick,
   onBeforeUnmount,
+  onMounted,
   PropType,
   ref,
   unref,
@@ -203,11 +204,21 @@ export default defineComponent({
       return $gettext('Back to main panels')
     })
 
-    const fullWidthSideBar = computed(() => window.innerWidth <= 1024)
+    const windowWidth = ref(window.innerWidth)
+
+    const fullWidthSideBar = computed(() => unref(windowWidth) <= 960)
     const backgroundContentEl = computed(() => {
       return unref(appSideBar)?.parentElement?.querySelector('div') as HTMLElement
     })
 
+    const onResize = () => {
+      if (!props.isOpen) {
+        return
+      }
+
+      windowWidth.value = window.innerWidth
+    }
+
     watch(
       () => props.isOpen,
       async (isOpen) => {
@@ -223,7 +234,13 @@ export default defineComponent({
       { immediate: true }
     )
 
+    onMounted(() => {
+      window.addEventListener('resize', onResize)
+    })
+
     onBeforeUnmount(() => {
+      window.removeEventListener('resize', onResize)
+
       if (unref(backgroundContentEl)) {
         unref(backgroundContentEl).style.visibility = 'visible'
       }
@@ -291,7 +308,7 @@ export default defineComponent({
   width: 100% !important;
 }
 
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: $oc-breakpoint-medium-default) {
   .files-wrapper {
     flex-wrap: nowrap !important;
   }