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,9 +10,11 @@ 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">
+        <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>
         <TopButton>Share</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,7 +145,23 @@ const IdeToolbarNew = ({ cadPackage }) => {
 
   return (
     <IdeContext.Provider value={{ state, thunkDispatch }}>
-      <div className="h-full flex flex-col">
+      <div className="h-full flex">
+        <div className="w-16 bg-gray-700 flex-shrink-0">
+          <IdeSideBar />
+        </div>
+        <div className="h-full flex flex-grow flex-col">
+          <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>
           <nav className="flex">
             <button
               onClick={handleRender}
@@ -166,6 +184,7 @@ const IdeToolbarNew = ({ cadPackage }) => {
           </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>