add dragbar

libs/remix-ui/app/src/lib/remix-app/dragbar/dragbar.css

@@ -20,7 +20,8 @@
   z-index: 9998;
 }
 
-  .dragbar:hover, .dragbar.ondrag{
+.dragbar:hover,
+.dragbar.ondrag {
   background-color: var(--secondary);
   cursor: col-resize;
 }

libs/remix-ui/panel/src/lib/dragbar/dragbar.css

@@ -0,0 +1,27 @@
+/* dragbar UI */
+
+.dragbar_terminal {
+  display: block;
+  width: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 0.3em;
+  z-index: 9999;
+}
+
+.overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  display: block;
+  z-index: 9998;
+}
+
+.dragbar_terminal:hover,
+.dragbar_terminal.ondrag {
+  background-color: var(--secondary);
+  cursor: row-resize;
+}

libs/remix-ui/panel/src/lib/main/main-panel.css

@@ -3,4 +3,5 @@
     flex-direction    : column;
     height            : 100%;
     width             : 100%;
+    position: relative;
   }  

libs/remix-ui/panel/src/lib/main/main-panel.tsx

@@ -1,5 +1,6 @@
 import AppContext from 'libs/remix-ui/app/src/lib/remix-app/context/context'
 import React, { useContext, useEffect, useRef, useState } from 'react' // eslint-disable-line
+import DragBar from '../dragbar/dragbar'
 import RemixUIPanelPlugin from '../plugins/panel-plugin'
 import { PluginRecord } from '../types'
 import './main-panel.css'
@@ -64,11 +65,14 @@ const RemixUIMainPanel = () => {
     <div className="mainview">
       {Object.values(plugins).map((pluginRecord, i) => {
         return (
+          <>
+          {(pluginRecord.profile.name === 'terminal') ? <DragBar minHeight={32} hidden={false} setHideStatus={()=>{}} refObject={terminalRef}></DragBar>:<></>}
           <RemixUIPanelPlugin
             ref={refs[i]}
             key={pluginRecord.profile.name}
             pluginRecord={pluginRecord}
           />
+          </>
         )
       })}
     </div>

libs/remix-ui/terminal/src/lib/remix-ui-terminal.tsx

@@ -435,7 +435,6 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
   return (
     <div style={{ height: '323px', flexGrow: 1 }} className='panel' ref={panelRef}>
       <div className="bar">
-        <div className={`dragbarHorizontal ${isDragging ? 'dragbarDragging' : ''}`} onMouseDown={handleDraggingStart} ref={leftRef}></div>
         <div className="menu border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu">
           <i className={`mx-2 toggleTerminal fas ${isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up'}`} data-id="terminalToggleIcon" onClick={handleToggleTerminal}></i>
           <div className="mx-2 console" id="clearConsole" data-id="terminalClearConsole" onClick={handleClearConsole} >