From 07b53430f9e9efefaa78d90d3a613d5518ede4e5 Mon Sep 17 00:00:00 2001
From: Rob Hough <robhough180@gmail.com>
Date: Mon, 4 May 2026 08:45:41 +0100
Subject: [PATCH] feat(editor): Add transition on Sidebar collapsed (#29650)

---
 .../src/app/components/MainSidebar.vue         | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/editor-ui/src/app/components/MainSidebar.vue b/packages/frontend/editor-ui/src/app/components/MainSidebar.vue
index 782575b00eb..4a9322e5278 100644
--- a/packages/frontend/editor-ui/src/app/components/MainSidebar.vue
+++ b/packages/frontend/editor-ui/src/app/components/MainSidebar.vue
@@ -57,8 +57,15 @@ if (resourceCenterStore.shouldAutoExpandSidebar) {
 	resourceCenterStore.markSidebarAutoExpanded();
 }
 
-const { isCollapsed, sidebarWidth, onResizeStart, onResize, onResizeEnd, toggleCollapse } =
-	useSidebarLayout();
+const {
+	isCollapsed,
+	isResizing,
+	sidebarWidth,
+	onResizeStart,
+	onResize,
+	onResizeEnd,
+	toggleCollapse,
+} = useSidebarLayout();
 
 const { settingsItems } = useSettingsItems();
 const { fetchWallet, isEnabled: isAiGatewayEnabled } = useAiGateway();
@@ -339,6 +346,7 @@ useKeybindings({
 		:class="{
 			[$style.sideMenu]: true,
 			[$style.sideMenuCollapsed]: isCollapsed,
+			[$style.sideMenuResizing]: isResizing,
 		}"
 		:width="sidebarWidth"
 		:style="isCollapsed ? {} : { width: `${sidebarWidth}px` }"
@@ -388,11 +396,17 @@ useKeybindings({
 	flex-direction: column;
 	border-right: var(--border);
 	background-color: var(--menu--color--background, var(--color--background--light-2));
+	transition: width var(--duration--snappy) var(--easing--ease-out);
+	will-change: width;
 
 	&.sideMenuCollapsed {
 		width: $sidebar-width;
 		min-width: auto;
 	}
+
+	&.sideMenuResizing {
+		transition: none;
+	}
 }
 
 .scrollAreaWrapper {