From d21d80e23f268acbd444203155150b6f03e4ca66 Mon Sep 17 00:00:00 2001
From: yann300 <yann.levreau@gmail.com>
Date: Thu, 11 Aug 2022 11:37:51 +0200
Subject: [PATCH] resize when debug starts

---
 .../src/lib/remix-app/components/dragbar/dragbar.tsx | 12 ++++++++++--
 libs/remix-ui/app/src/lib/remix-app/remix-app.tsx    | 10 ++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
index ecad78451c..61a43a32eb 100644
--- a/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/components/dragbar/dragbar.tsx
@@ -7,7 +7,7 @@ interface IRemixDragBarUi {
   setHideStatus: (hide: boolean) => void;
   hidden: boolean
   minWidth: number
-  resizeTo?: number
+  maximiseTrigger: number
 }
 
 const DragBar = (props: IRemixDragBarUi) => {
@@ -18,7 +18,15 @@ const DragBar = (props: IRemixDragBarUi) => {
 
   useEffect(() => {
     setDragBarPosX(offset + (props.hidden ? 0 : props.refObject.current.offsetWidth))
-  }, [props.hidden, offset, props.resizeTo])
+  }, [props.hidden, offset])
+
+  useEffect(() => {
+    if (props.maximiseTrigger > 0) {
+      const width =  0.4 * window.innerWidth
+      props.refObject.current.style.width = width + 'px'
+      setDragBarPosX(offset + width)  
+    }
+  }, [props.maximiseTrigger])
 
   const handleResize = () => {
     setOffSet(props.refObject.current.offsetLeft)
diff --git a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
index be753dbc89..df4c8cf944 100644
--- a/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
+++ b/libs/remix-ui/app/src/lib/remix-app/remix-app.tsx
@@ -17,7 +17,7 @@ interface IRemixAppUi {
 const RemixApp = (props: IRemixAppUi) => {
   const [appReady, setAppReady] = useState<boolean>(false)
   const [hideSidePanel, setHideSidePanel] = useState<boolean>(false)
-  const [resizeSidePanel, setResizeSidePanel] = useState<number>(0)
+  const [maximiseTrigger, setMaximiseTrigger] = useState<number>(0)
   const sidePanelRef = useRef(null)
 
   useEffect(() => {
@@ -50,8 +50,10 @@ const RemixApp = (props: IRemixAppUi) => {
       }, 1000)
     })
 
-    props.app.layout.events.on('maximisesidepanel', () => {
-      setResizeSidePanel(600)
+    props.app.layout.event.on('maximisesidepanel', () => {
+      setMaximiseTrigger(prev => {
+        return prev + 1
+      })
     })
   }
 
@@ -71,7 +73,7 @@ const RemixApp = (props: IRemixAppUi) => {
       <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
         <div id="icon-panel" data-id="remixIdeIconPanel" className="iconpanel bg-light">{props.app.menuicons.render()}</div>
         <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}>{props.app.sidePanel.render()}</div>
-        <DragBar resizeTo={resizeSidePanel} minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
+        <DragBar maximiseTrigger={maximiseTrigger} minWidth={250} refObject={sidePanelRef} hidden={hideSidePanel} setHideStatus={setHideSidePanel}></DragBar>
         <div id="main-panel" data-id="remixIdeMainPanel" className='mainpanel'>
           <RemixUIMainPanel Context={AppContext}></RemixUIMainPanel>
         </div>