From c6c903d1b834d259576941841362260085100dc5 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Sat, 19 Oct 2024 21:05:51 +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 9dffb5123f..3b0922248c 100644 --- a/src/components/NcAppSidebar/NcAppSidebar.vue +++ b/src/components/NcAppSidebar/NcAppSidebar.vue @@ -1229,8 +1229,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) {