chore: improve side drawer sliding motion

Author: kevinkim-ogp

packages/frontend/src/components/Editor/index.tsx

@@ -151,31 +151,29 @@ export default function Editor(props: EditorProps): React.ReactElement {
     )
   }
 
-  const getStepPadding = () => {
-    if (isDrawerOpen) {
-      if (isMobile) {
-        return 0
-      }
-      return '5rem'
-    }
-    return 0
-  }
+  const leftStepPadding = isDrawerOpen ? (isMobile ? 0 : '5rem') : 0
+  const rightDrawerTransform = isDrawerOpen
+    ? 'translateX(0)'
+    : 'translateX(100%)'
+  const rightDrawerWidth = isDrawerOpen
+    ? isMobile
+      ? '100vw'
+      : EDITOR_RIGHT_DRAWER_WIDTH
+    : '0'
 
   return (
     <Flex
-      w="full"
-      justifyContent="center"
-      overflowX="hidden"
+      {...editorStyles.editorWrapper}
       sx={{
         backgroundImage: 'radial-gradient(#f5f5f5 2px, transparent 2px)',
         backgroundSize: '30px 30px',
       }}
     >
       <StepExecutionsToIncludeProvider value={stepExecutionsToInclude}>
         <Flex
-          {...editorStyles.container}
+          {...editorStyles.stepHeaderContainer}
           flex={isDrawerOpen ? (isMobile ? 0 : 1) : undefined}
-          px={getStepPadding()}
+          px={leftStepPadding}
           maxWidth={`calc(100% - ${
             isDrawerOpen ? EDITOR_RIGHT_DRAWER_WIDTH : '0px'
           })`}
@@ -211,19 +209,19 @@ export default function Editor(props: EditorProps): React.ReactElement {
             />
           )}
         </Flex>
-
+        {/** HACKFIX (kevinkim-ogp): to ensure that the transitions are smooth */}
+        <Flex
+          {...editorStyles.dummyRightContainer}
+          w={rightDrawerWidth}
+          transform={rightDrawerTransform}
+        />
         <Flex
           {...editorStyles.rightDrawerContainer}
-          w={
-            isDrawerOpen
-              ? isMobile
-                ? '100vw'
-                : EDITOR_RIGHT_DRAWER_WIDTH
-              : '0'
-          }
+          w={rightDrawerWidth}
           visibility={isDrawerOpen ? 'visible' : 'hidden'}
           opacity={isDrawerOpen ? 1 : 0}
-          transform={isDrawerOpen ? 'translateX(0)' : 'translateX(100%)'}
+          transform={rightDrawerTransform}
+          borderLeft={isDrawerOpen ? '1px solid base.divider.medium' : 'none'}
         >
           <EditorRightDrawer
             flowStepGroupIconUrl={flowStepGroupIconUrl}

packages/frontend/src/components/Editor/styles.ts

@@ -1,9 +1,15 @@
 import { FlexProps } from '@chakra-ui/react'
 
-import { EDITOR_MAX_HEIGHT } from './constants'
+import { EDITOR_MAX_HEIGHT, EDITOR_RIGHT_DRAWER_WIDTH } from './constants'
 
 export const editorStyles = {
-  container: {
+  editorWrapper: {
+    w: 'full',
+    overflowX: 'hidden' as FlexProps['overflowX'],
+    justifyContent: 'center',
+    pos: 'relative' as FlexProps['pos'],
+  },
+  stepHeaderContainer: {
     display: 'block',
     flexDir: 'column' as FlexProps['flexDir'],
     alignItems: 'center',
@@ -16,18 +22,26 @@ export const editorStyles = {
     transition: 'transform 0.4s cubic-bezier(0.3, 0, 0.2, 1)',
     w: '100%',
   },
+  dummyRightContainer: {
+    pos: 'relative' as FlexProps['pos'],
+    maxHeight: EDITOR_MAX_HEIGHT,
+    h: EDITOR_MAX_HEIGHT,
+    overflow: 'hidden' as FlexProps['overflow'],
+    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+    border: 'none',
+  },
   rightDrawerContainer: {
     flexDir: 'column' as FlexProps['flexDir'],
-    position: 'relative' as FlexProps['position'],
+    position: 'absolute' as FlexProps['position'],
     bg: 'white',
     borderRadius: 'none',
-    borderLeft: '1px',
-    borderColor: 'base.divider.medium',
     boxShadow: 'lg',
     opacity: 0,
+    right: 0,
+    minWidth: EDITOR_RIGHT_DRAWER_WIDTH,
     maxHeight: EDITOR_MAX_HEIGHT,
     h: EDITOR_MAX_HEIGHT,
     overflowY: 'auto' as FlexProps['overflowY'],
-    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+    transition: 'transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
   },
 }