fix(core): make sidebar switch transition smooth (#6085)

packages/frontend/core/src/modules/workbench/view/route-container.css.ts

@@ -39,7 +39,20 @@ export const leftSidebarButton = style({
 });
 
 export const rightSidebarButton = style({
-  margin: '0 0 0 16px',
+  transition: 'all 0.2s ease-in-out',
+  selectors: {
+    '&[data-show=true]': {
+      opacity: 1,
+      width: 32,
+      maxWidth: 32,
+      marginLeft: 16,
+    },
+    '&[data-show=false]': {
+      opacity: 0,
+      maxWidth: 0,
+      marginLeft: 0,
+    },
+  },
 });
 
 export const viewHeaderContainer = style({

packages/frontend/core/src/modules/workbench/view/route-container.tsx

@@ -25,12 +25,19 @@ export interface Props {
 const ToggleButton = ({
   onToggle,
   className,
+  show,
 }: {
   onToggle?: () => void;
   className: string;
+  show: boolean;
 }) => {
   return (
-    <IconButton size="large" onClick={onToggle} className={className}>
+    <IconButton
+      size="large"
+      onClick={onToggle}
+      className={className}
+      data-show={show}
+    >
       <RightSidebarIcon />
     </IconButton>
   );
@@ -50,14 +57,18 @@ export const RouteContainer = ({ route }: Props) => {
   return (
     <div className={styles.root}>
       <div className={styles.header}>
-        {viewPosition.isFirst && !leftSidebarOpen && (
-          <SidebarSwitch className={styles.leftSidebarButton} />
+        {viewPosition.isFirst && (
+          <SidebarSwitch
+            show={!leftSidebarOpen}
+            className={styles.leftSidebarButton}
+          />
         )}
         <view.header.Target className={styles.viewHeaderContainer} />
-        {viewPosition.isLast && !rightSidebarOpen && (
+        {viewPosition.isLast && (
           <>
             {rightSidebarHasViews && (
               <ToggleButton
+                show={!rightSidebarOpen}
                 className={styles.rightSidebarButton}
                 onToggle={handleToggleRightSidebar}
               />