updated sidePanel addView

apps/remix-ide/src/app/components/panel.js

@@ -22,7 +22,14 @@ export class AbstractPanel extends HostPlugin {
 
   addView (profile, view) {
     if (this.contents[profile.name]) throw new Error(`Plugin ${profile.name} already rendered`)
+    view.style.height = '100%'
+    view.style.width = '100%'
     view.style.border = '0'
+
+    if (view.tagName === 'IFRAME') {
+      view.style.display = 'block'
+    }
+
     this.contents[profile.name] = view
     this.contents[profile.name].style.display = 'none'
     this.element.appendChild(this.contents[profile.name])
@@ -57,9 +64,12 @@ export class AbstractPanel extends HostPlugin {
     if (this.active) {
       this.contents[this.active].style.display = 'none'
     }
+    console.log({ name, active: this.active, contents: this.contents })
     this.contents[name].style.display = 'flex'
+    this.contents[name].style.paddingTop = '20%'
+    this.contents[name].style.flexDirection = 'column'
+
     this.active = name
-    this.renderComponent()
   }
 
   focus (name) {

apps/remix-ide/src/app/components/side-panel.js

@@ -18,8 +18,9 @@ export class SidePanel extends AbstractPanel {
   constructor (appManager, verticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.sideelement = this.element
+    // this.sideelement = this.element
-    // this.sideelement.setAttribute('class', 'panel')
+    this.sideelement = document.createElement('div')
+    this.element = this.sideelement
     this.verticalIcons = verticalIcons
 
     // Toggle content

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

@@ -46,14 +46,9 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
    return (
     <header style={{
       display: 'flex',
-    flexDirection: 'column',
     alignItems: 'center',
-    padding: '10px',
+    padding: '16px 24px 15px',
-    position: 'sticky',
+    justifyContent: 'space-between',
-    top: 0,
-    zIndex: 2,
-    marginBottom: '0px',
-    boxSizing: 'inherit',
     }}>
     <h6 className="swapitTitle" data-id="sidePanelSwapitTitle">{name}</h6>
     {dockLink ? (<a href={profileDocsLink} className="titleInfo" title="link to documentation" target="_blank" rel="noreferrer"><i aria-hidden="true" className="fas fa-book"></i></a>) : ''}
@@ -65,7 +60,13 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
 
 
   return (
-            <section style={{ position:'sticky' }}>
+            <section style={{
+              position: "fixed",
+              height: "50px",
+              width: "320px",
+              backgroundColor: "var(--light)",
+              zIndex: "999",
+            }} >
               {renderHeader()}
             </section>
   );