feat: displays main manu in top left corner

src/components/ItemControls/ItemControlsManager.tsx

@@ -31,7 +31,7 @@ export const ItemControlsManager = () => {
   return (
     <UiElement
       sx={{
-        top: theme.customVars.appPadding.y * 3
+        top: theme.customVars.appPadding.y * 2 + parseInt(theme.spacing(2), 10)
       }}
     >
       <Box

src/components/MainMenu/MainMenu.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { UiElement } from 'src/components/UiElement/UiElement';
+import { IconButton } from 'src/components/IconButton/IconButton';
+import { Menu as MenuIcon } from '@mui/icons-material';
+
+export const MainMenu = () => {
+  return (
+    <UiElement>
+      <IconButton Icon={<MenuIcon />} name="Main menu" onClick={() => {}} />
+    </UiElement>
+  );
+};

src/components/UiOverlay/UiOverlay.tsx

@@ -4,6 +4,7 @@ import { DragAndDrop } from 'src/components/DragAndDrop/DragAndDrop';
 import { ItemControlsManager } from 'src/components/ItemControls/ItemControlsManager';
 import { ToolMenu } from 'src/components/ToolMenu/ToolMenu';
 import { useUiStateStore } from 'src/stores/uiStateStore';
+import { MainMenu } from 'src/components/MainMenu/MainMenu';
 
 export const UiOverlay = () => {
   const disableInteractions = useUiStateStore((state) => {
@@ -27,6 +28,7 @@ export const UiOverlay = () => {
           <DragAndDrop icon={mode.icon} tile={mouse.position.tile} />
         </SceneLayer>
       )}
+      <MainMenu />
     </>
   );
 };