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

@@ -31,9 +31,7 @@ const EditorMenu = () => {
           <button className="cursor-not-allowed" disabled>
             Edit
           </button>
-          <button className="cursor-not-allowed" disabled>
+          <ViewDropdown handleLayoutReset={() => thunkDispatch({type: 'resetLayout'})} />
-            View
-          </button>
         </div>
         <button
           className="text-gray-300  h-full cursor-not-allowed"
@@ -59,9 +57,7 @@ export default EditorMenu
 
 function FileDropdown({ handleRender, handleStlDownload }) {
   return (
-    <Menu>
+    <Dropdown name="File">
-      <Menu.Button className="text-gray-100">File</Menu.Button>
-      <Menu.Items className="absolute flex flex-col mt-10 bg-gray-500 rounded shadow-md text-gray-100">
       <Menu.Item>
         {({ active }) => (
           <button
@@ -95,7 +91,36 @@ function FileDropdown({ handleRender, handleStlDownload }) {
           </button>
         )}
       </Menu.Item>
-      </Menu.Items>
+    </Dropdown>
-    </Menu>
+  )
+}
+
+function ViewDropdown({ handleLayoutReset }) {
+  return (
+    <Dropdown name="View">
+      <Menu.Item>
+        {({ active }) => (
+          <button
+            className={`${active && 'bg-gray-600'} px-2 py-1`}
+            onClick={handleLayoutReset}
+          >
+            Reset layout
+          </button>
+        )}
+      </Menu.Item>
+    </Dropdown>
+  )
+}
+
+function Dropdown({ name, children }: {name: string, children: React.ReactNode}) {
+  return (
+    <div className="relative">
+      <Menu>
+        <Menu.Button className="text-gray-100">{name}</Menu.Button>
+        <Menu.Items className="absolute flex flex-col mt-4 bg-gray-500 rounded shadow-md text-gray-100 overflow-hidden whitespace-nowrap">
+          {children}
+        </Menu.Items>
+      </Menu>
+    </div>
   )
 }

app/web/src/helpers/hooks/useIdeState.js

@@ -47,6 +47,16 @@ let mutableState = null
 
 export const useIdeState = () => {
   const code = ''
+  const initialLayout = {
+    direction: 'row',
+    first: 'Editor',
+    second: {
+      direction: 'column',
+      first: 'Viewer',
+      second: 'Console',
+      splitPercentage: 70,
+    },
+  }
   const initialState = {
     ideType: 'INIT',
     consoleMessages: [
@@ -57,16 +67,7 @@ export const useIdeState = () => {
       type: 'INIT',
       data: null,
     },
-    layout: {
+    layout: initialLayout,
-      direction: 'row',
-      first: 'Editor',
-      second: {
-        direction: 'column',
-        first: 'Viewer',
-        second: 'Console',
-        splitPercentage: 70,
-      },
-    },
     camera: {},
     viewerSize: { width: 0, height: 0 },
     isLoading: false,
@@ -129,6 +130,11 @@ export const useIdeState = () => {
           ...state,
           isLoading: false,
         }
+      case 'resetLayout':
+        return {
+          ...state,
+          layout: initialLayout,
+        }
       default:
         return state
     }