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

packages/frontend/core/src/components/app-sidebar/sidebar-header/sidebar-switch.css.ts

@@ -1,18 +1,23 @@
 import { style } from '@vanilla-extract/css';
+
 export const sidebarSwitch = style({
   opacity: 0,
-  display: 'none !important',
+  display: 'inline-flex',
   overflow: 'hidden',
   pointerEvents: 'none',
-  transition: 'all .3s ease-in-out',
+  transition: 'max-width 0.2s ease-in-out, margin 0.3s ease-in-out',
   selectors: {
     '&[data-show=true]': {
+      maxWidth: '32px',
       opacity: 1,
-      display: 'inline-flex !important',
       width: '32px',
       flexShrink: 0,
       fontSize: '24px',
       pointerEvents: 'auto',
     },
+    '&[data-show=false]': {
+      maxWidth: 0,
+      margin: '0 !important',
+    },
   },
 });

packages/frontend/core/src/components/app-sidebar/sidebar-header/sidebar-switch.tsx

@@ -8,10 +8,10 @@ import { appSidebarOpenAtom } from '../index.jotai';
 import * as styles from './sidebar-switch.css';
 
 export const SidebarSwitch = ({
-  show = true,
+  show,
   className,
 }: {
-  show?: boolean;
+  show: boolean;
   className?: string;
 }) => {
   const [open, setOpen] = useAtom(appSidebarOpenAtom);

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 && (
+        {viewPosition.isFirst && (
-          <SidebarSwitch className={styles.leftSidebarButton} />
+          <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}
               />