From d5a2a7a9ade369d0256e153cbd4d4cc5cec099b6 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Wed, 19 Jun 2024 17:17:47 +0200 Subject: [PATCH] fix(NcAppSidebar): apply toggle offset transition only on sidebar transition Signed-off-by: Grigorii K. Shartsev --- src/components/NcAppSidebar/NcAppSidebar.vue | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue index e49298fd24..f259441acf 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -1126,8 +1126,15 @@ export default { --app-sidebar-padding: #{$app-navigation-padding}; // A padding between the toggle button and the page border --app-sidebar-offset: 0; - transition-duration: var(--animation-quick); - transition-property: --app-sidebar-offset; + // Explicitly disable transition by default to enable it only when sidebar animation is active + // !important to override styles from an older version, because it's global non-scoped styles + transition: --app-sidebar-offset 0ms !important; +} + +// When AppSidebar is animation is active - also apply transition for the toggle button offset +.content:has(.app-sidebar.slide-right-enter-active), +.content:has(.app-sidebar.slide-right-leave-active) { + transition: --app-sidebar-offset var(--animation-quick); } .content:has(.app-sidebar__toggle) {