Add visibility css for pyscript dev buttons and support for opening/close component details nav

pyscriptjs/src/App.svelte

@@ -4,10 +4,12 @@
   import { faPlusCircle } from '@fortawesome/free-solid-svg-icons'
   import Tailwind from "./Tailwind.svelte";
   import { loadInterpreter } from './interpreter';
-  import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
+  import { pyodideLoaded, loadedEnvironments, navBarOpen, componentsNavOpen } from './stores';
   import Main from "./Main.svelte";
   import Header from "./Header.svelte";
   import SideNav from "./SideNav.svelte";
+  import ComponentsNav from "./ComponentsNav.svelte";
+  import ComponentDetailsNav from "./ComponentDetailsNav.svelte";
 
   let iconSize = 2;
   let pyodideReadyPromise
@@ -41,6 +43,10 @@
     });
   }
 
+  function toggleComponentsNavBar(evt){
+      componentsNavOpen.set(!$componentsNavOpen);
+    }
+
 </script>
 
 <svelte:head>
@@ -49,27 +55,38 @@
 
 <style>
   :global(div.dev-buttons-group) {
-    margin-top: -12px;
+    margin-top: -15px;
     z-index: 9999;
   }
 
   :global(div.output) {
-    margin-top: -25px;
     z-index: 9999;
   }
+
+  :global(div.buttons-box) {
+    visibility: hidden;
+  }
+
+  :global(.parentBox:hover .buttons-box) {
+    visibility: visible;
+  }
+
 </style>
 
 <Tailwind />
 
-
 <div class="flex flex-wrap bg-grey-light min-h-screen">
   <div>
     <SideNav />
   </div>
+  <div>
+    <ComponentsNav />
+  </div>
+  <div><ComponentDetailsNav /></div>
   <div id="main" class="w-full min-h-full absolute pin-r flex flex-col">
     <Header />
     <div id="add-component" class="lex flex-column w-full text-lg">
-      <div style="margin-left: 50%;" on:mouseenter={bumpSize} on:mouseleave={downSize}>
+      <div style="margin-left: 50%;" on:mouseenter={bumpSize} on:mouseleave={downSize} on:click={toggleComponentsNavBar}>
         <Fa icon={faPlusCircle} class="grow-icon"style="transform: scale({iconSize});"/>
       </div>
     </div>