fixed toolbar animation

src/canvas/canvas.js

@@ -77,7 +77,7 @@ class Canvas extends React.Component {
             contextMenuItems: [],
             selectedWidget: null,
 
-            toolbarOpen: true,
+            toolbarOpen: false,
             toolbarAttrs: null
         }
 
@@ -240,7 +240,8 @@ class Canvas extends React.Component {
                     // console.log("selected widget", selectedWidget.getToolbarAttrs(), selectedWidget, this.state.selectedWidget)
                     this.setState({
                         selectedWidget: selectedWidget,
-                        toolbarAttrs: selectedWidget.getToolbarAttrs()
+                        toolbarAttrs: selectedWidget.getToolbarAttrs(),
+                        toolbarOpen: true
                     })
 
 
@@ -271,7 +272,7 @@ class Canvas extends React.Component {
 
             this.setState({
                 contextMenuItems: [],
-                toolbarOpen: true
+                // toolbarOpen: true
             })
             // this.setState({
             //     showContextMenu: false
@@ -538,7 +539,7 @@ class Canvas extends React.Component {
         this.setState({
             selectedWidget: null,
             toolbarAttrs: null,
-            // toolbarOpen: 
+            toolbarOpen: false
         })
 
     }
@@ -649,6 +650,7 @@ class Canvas extends React.Component {
       handleDropEvent = (e, draggedElement, widgetClass = null) => {
 
         e.preventDefault()
+        console.log("Drop event")
 
         this.setState({ isWidgetDragging: false })
 
@@ -1043,7 +1045,7 @@ class Canvas extends React.Component {
     render() {
 
         return (
-            <div className="tw-relative tw-flex tw-w-full tw-h-full tw-max-h-[100vh]">
+            <div className="tw-relative tw-overflow-hidden tw-flex tw-w-full tw-h-full tw-max-h-[100vh]">
 
                 <div className="tw-absolute tw-p-2 tw-bg-white tw-z-10 tw-min-w-[100px] tw-h-[50px] tw-gap-2 
                                     tw-top-4 tw-place-items-center tw-right-4 tw-shadow-md tw-rounded-md tw-flex">

src/canvas/toolbar.js

@@ -282,10 +282,15 @@ const CanvasToolBar = memo(({ isOpen, widgetType, attrs = {} }) => {
 
     return (
         <div
-            className={`tw-absolute tw-top-20 tw-right-5 tw-bg-white ${toolbarOpen ? "tw-w-[280px]" : "tw-w-0"
-                } tw-px-3 tw-p-2 tw-h-[600px] tw-rounded-md tw-z-[1000] tw-shadow-lg 
-                             tw-transition-transform tw-duration-75 tw-overflow-x-hidden
-                             tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto`}
+            className={`tw-absolute tw-top-20 tw-right-5 tw-bg-white 
+                ${toolbarOpen ? "tw-translate-x-0" : "tw-translate-x-full"} 
+                tw-w-[280px] tw-px-3 tw-p-2 tw-h-[600px] tw-rounded-md tw-z-[1000] tw-shadow-lg 
+                tw-transition-transform tw-duration-[0.3s] tw-overflow-x-hidden
+                tw-flex tw-flex-col tw-gap-2 tw-overflow-y-auto`}
+
+                style={{
+                    transform: toolbarOpen ? "translateX(0)" : "translateX(calc(100% + 50px))"
+                }}
         >
             <h3 className="tw-text-lg tw-text-center">
                 {capitalize(`${widgetType || ""}`).replace(/_/g, " ")}