datagrid toolbar using portals

packages/web/src/widgets/Toolbar.js

@@ -1,16 +1,18 @@
+import ReactDOM from 'react-dom';
 import React from 'react';
 import useModalState from '../modals/useModalState';
 import ConnectionModal from '../modals/ConnectionModal';
 import styled from 'styled-components';
 import theme from '../theme';
+import { useOpenedTabs } from '../utility/globalState';
 
 const ToolbarContainer = styled.div`
   display: flex;
   user-select: none;
 `;
 
-const ToolbarButton = styled.div`
-  // height: ${theme.toolBar.height-5}px;
+export const ToolbarButton = styled.div`
+  // height: ${theme.toolBar.height - 5}px;
   // border: 1px solid gray;
   padding: 5px;
   margin: 2px;
@@ -22,15 +24,26 @@ const ToolbarButton = styled.div`
   &:hover {
     background-color: #286090;
   }
-
 `;
 
-export default function ToolBar() {
+export default function ToolBar({ toolbarPortalRef }) {
   const modalState = useModalState();
+  const tabs = useOpenedTabs();
+  const selectedTab = tabs.find(x => x.selected);
+//   React.useEffect(() => {
+//     const node = toolbarPortalRef.current;
+//     if (node) {
+//       ReactDOM.unmountComponentAtNode(node);
+//       while (node.lastElementChild) {
+//         node.removeChild(node.lastElementChild);
+//       }
+//     }
+//   }, [selectedTab]);
   return (
     <ToolbarContainer>
       <ConnectionModal modalState={modalState} />
       <ToolbarButton onClick={modalState.open}>Add connection</ToolbarButton>
+      <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
     </ToolbarContainer>
   );
 }