resize when debug starts

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)

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', () => {
+    props.app.layout.event.on('maximisesidepanel', () => {
-      setResizeSidePanel(600)
+      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>