finish ide lay out

added side bar and editor toolbar
related to #360

app/web/src/components/EditorMenu/EditorMenu.tsx

@@ -0,0 +1,31 @@
+import Svg from 'src/components/Svg/Svg'
+
+const EditorMenu = () => {
+  return (
+    <div className="bg-gray-500 flex items-center h-9 w-full cursor-grab">
+      <div className=" text-gray-500 bg-gray-300 cursor-grab px-2 h-full flex items-center">
+        <Svg name='drag-grid' className="w-4 p-px" />
+      </div>
+      <button
+        className="text-gray-300 px-3 h-full"
+        aria-label="editor settings"
+      >
+        <Svg name='gear' className="w-7 p-px" />
+      </button>
+      <div className="w-px h-full bg-gray-300"/>
+      <div className="flex gap-6 px-6">
+        <button className="text-gray-100">
+          File
+        </button>
+        <button className="text-gray-100">
+          Edit
+        </button>
+        <button className="text-gray-100">
+          View
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default EditorMenu

app/web/src/components/IdeContainer/IdeContainer.js

@@ -6,6 +6,7 @@ import IdeEditor from 'src/components/IdeEditor'
 import IdeViewer from 'src/components/IdeViewer'
 import IdeConsole from 'src/components/IdeConsole'
 import 'react-mosaic-component/react-mosaic-component.css'
+import EditorMenu from 'src/components/EditorMenu/EditorMenu'
 
 const ELEMENT_MAP = {
   Editor: <IdeEditor />,
@@ -64,7 +65,7 @@ const IdeContainer = () => {
           return (
             <MosaicWindow
               path={path}
-              renderToolbar={() => <div/>} // needs an empty element, otherwise it adds it's own toolbar
+              renderToolbar={() => id === 'Editor' ? <div className="w-full"><EditorMenu /></div> : <div/>} // needs an empty element, otherwise it adds it's own toolbar
               className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`}
             >
               {id === 'Viewer' ? (

app/web/src/components/IdeHeader/IdeHeader.tsx

@@ -10,8 +10,10 @@ const TopButton = ({children}) => (
 const IdeHeader = () => {
   return (
     <div className="h-16 bg-gray-900 flex justify-between items-center">
-      <div className="w-16 h-full flex items-center justify-center bg-gray-700">
+      <div className="bg-gray-700 pr-48 h-full">
-        <Svg className="w-12" name="favicon" />
+        <div className="w-16 h-full flex items-center justify-center bg-gray-900">
+          <Svg className="w-12" name="favicon" />
+        </div>
       </div>
       <div className="text-gray-200 flex gap-4 mr-4">
         <TopButton>Render</TopButton>

app/web/src/components/IdeSideBar/IdeSideBar.tsx

@@ -0,0 +1,13 @@
+import Svg from 'src/components/Svg/Svg'
+
+const IdeSideBar = () => {
+  return (
+    <div className="h-full flex flex-col justify-end">
+      <button className=" text-gray-300 p-2 pb-4 flex justify-center" aria-label="IDE settings">
+        <Svg name="big-gear" />
+      </button>
+    </div>
+  )
+}
+
+export default IdeSideBar

app/web/src/components/IdeToolbarNew/IdeToolbarNew.js

@@ -9,6 +9,8 @@ import { flow, identity } from 'lodash/fp'
 import { fileSave } from 'browser-fs-access'
 import { MeshBasicMaterial, Mesh, Scene } from 'three'
 import { STLExporter } from 'three/examples/jsm/exporters/STLExporter'
+import OutBound from 'src/components/OutBound'
+import IdeSideBar from 'src/components/IdeSideBar'
 
 export const githubSafe = (url) =>
   url.includes('github.com')
@@ -143,28 +145,45 @@ const IdeToolbarNew = ({ cadPackage }) => {
 
   return (
     <IdeContext.Provider value={{ state, thunkDispatch }}>
-      <div className="h-full flex flex-col">
+      <div className="h-full flex">
-        <nav className="flex">
+        <div className="w-16 bg-gray-700 flex-shrink-0">
-          <button
+          <IdeSideBar />
-            onClick={handleRender}
+        </div>
-            className="border-2 px-2 text-gray-700 text-sm m-1"
+        <div className="h-full flex flex-grow flex-col">
-          >
+          <div className="py-2 bg-pink-200">
-            Render
+            <div className="mx-auto max-w-3xl">
-          </button>
+              We're still working on this. Since you're here, have a look what{' '}
-          <button
+              <OutBound
-            onClick={handleMakeLink}
+                className="text-pink-700"
-            className="border-2 text-gray-700 px-2 text-sm m-1 ml-2"
+                to="https://github.com/Irev-Dev/cadhub/discussions/212"
-          >
+              >
-            Copy link
+                we've got planned
-          </button>
+              </OutBound>
-          <button
+              .
-            onClick={handleStlDownload}
+            </div>
-            className="border-2 text-gray-700 px-2 text-sm m-1 ml-2"
+          </div>
-          >
+          <nav className="flex">
-            Download STL
+            <button
-          </button>
+              onClick={handleRender}
-        </nav>
+              className="border-2 px-2 text-gray-700 text-sm m-1"
-        <IdeContainer />
+            >
+              Render
+            </button>
+            <button
+              onClick={handleMakeLink}
+              className="border-2 text-gray-700 px-2 text-sm m-1 ml-2"
+            >
+              Copy link
+            </button>
+            <button
+              onClick={handleStlDownload}
+              className="border-2 text-gray-700 px-2 text-sm m-1 ml-2"
+            >
+              Download STL
+            </button>
+          </nav>
+          <IdeContainer />
+        </div>
       </div>
     </IdeContext.Provider>
   )

app/web/src/pages/DevIdePage/DevIdePage.js

@@ -1,6 +1,5 @@
 import Seo from 'src/components/Seo/Seo'
 import IdeToolbar from 'src/components/IdeToolbarNew'
-import OutBound from 'src/components/OutBound'
 import IdeHeader from 'src/components/IdeHeader'
 
 const DevIdePage = ({ cadPackage }) => {
@@ -12,18 +11,6 @@ const DevIdePage = ({ cadPackage }) => {
         lang="en-US"
       />
       <IdeHeader />
-      <div className="py-2 bg-pink-200">
-        <div className="mx-auto max-w-3xl">
-          We're still working on this. Since you're here, have a look what{' '}
-          <OutBound
-            className="text-pink-700"
-            to="https://github.com/Irev-Dev/cadhub/discussions/212"
-          >
-            we've got planned
-          </OutBound>
-          .
-        </div>
-      </div>
       <div className="flex-auto">
         <IdeToolbar cadPackage={cadPackage} />
       </div>