diff --git a/changelog/unreleased/bugfix-left-sidebar-app-switch b/changelog/unreleased/bugfix-left-sidebar-app-switch new file mode 100644 index 00000000000..841f8806d3c --- /dev/null +++ b/changelog/unreleased/bugfix-left-sidebar-app-switch @@ -0,0 +1,6 @@ +Bugfix: Left sidebar when switching apps + +We've fixed a bug where the active state of the left sidebar would glitch visually when switching apps. + +https://github.com/owncloud/web/issues/7526 +https://github.com/owncloud/web/pull/7529 diff --git a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue index 410a786bbd8..24af5f0e13a 100644 --- a/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue +++ b/packages/web-runtime/src/components/SidebarNav/SidebarNav.vue @@ -74,25 +74,23 @@ export default { } }, mounted() { - const navItem = document.getElementsByClassName('oc-sidebar-nav-item-link')[0] + const navBar = document.getElementById('web-nav-sidebar') const highlighter = document.getElementById('nav-highlighter') - if (!highlighter || !navItem) { + if (!highlighter || !navBar) { return } - const resizeObserver = new ResizeObserver((data) => { - const width = data[0].borderBoxSize[0].inlineSize - highlighter.style.setProperty('transition-duration', `0.05s`) - if (width) { - highlighter.style.setProperty('width', `${width}px`) + const resizeObserver = new ResizeObserver(() => { + const navItem = document.getElementsByClassName('oc-sidebar-nav-item-link')[0] + if (!navItem) { + return } - }) - resizeObserver.observe(navItem) - if (navItem.clientWidth) { + highlighter.style.setProperty('transition-duration', `0.05s`) highlighter.style.setProperty('width', `${navItem.clientWidth}px`) highlighter.style.setProperty('height', `${navItem.clientHeight}px`) - } + }) + resizeObserver.observe(navBar) this.$on('beforeDestroy', () => { resizeObserver.disconnect() @@ -149,7 +147,7 @@ export default { max-width: 230px !important; } .oc-app-navigation-collapsed { - min-width: 58px !important; - max-width: 58px !important; + min-width: 62px !important; + max-width: 62px !important; }