update abstract and side panels

apps/remix-ide/src/app.js

@@ -91,7 +91,6 @@ const css = csjs`
     flex-direction     : row-reverse;
     width              : 320px;
     overflow           : auto;
-    padding-bottom: 20px;
   }
   .highlightcode       {
     position           : absolute;

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

@@ -55,10 +55,8 @@ export class AbstractPanel extends HostPlugin {
     if (!this.contents[name]) throw new Error(`Plugin ${name} is not yet activated`)
     // hiding the current view and display the `moduleName`
     if (this.active) {
-      console.log({ active: this.active, name }, 'first')
       this.contents[this.active].style.display = 'none'
     }
-    console.log({ active: this.active, name }, 'second')
     this.contents[name].style.display = 'flex'
     this.active = name
     this.renderComponent()

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

@@ -2,10 +2,8 @@ import React from 'react' // eslint-disable-line
 import { AbstractPanel } from './panel'
 import ReactDOM from 'react-dom' // eslint-disable-line
 import { RemixUiSidePanel } from '@remix-ui/side-panel' // eslint-disable-line
-import { RemixUiAbstractPanel } from '@remix-ui/abstract-panel'
 import * as packageJson from '../../../../../package.json'
 // const csjs = require('csjs-inject')
-const yo = require('yo-yo')
 
 const sidePanel = {
   name: 'sidePanel',
@@ -20,7 +18,6 @@ export class SidePanel extends AbstractPanel {
   constructor (appManager, verticalIcons) {
     super(sidePanel)
     this.appManager = appManager
-    this.header = yo`<header></header>`
     this.sideelement = this.element
     // this.sideelement.setAttribute('class', 'panel')
     this.verticalIcons = verticalIcons

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

@@ -46,9 +46,14 @@ export function RemixUiSidePanel(props: RemixUiSidePanelProps) {
    return (
     <header style={{
       display: 'flex',
+    flexDirection: 'column',
     alignItems: 'center',
-      padding: '16px 24px 15px',
-      justifyContent: 'space-between'
+    padding: '10px',
+    position: 'sticky',
+    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>) : ''}