feat: closes any open itm controls if main menu is opened

src/components/IconButton/IconButton.tsx

@@ -6,7 +6,7 @@ interface Props {
   name: string;
   Icon: React.ReactNode;
   isActive?: boolean;
-  onClick: () => void;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
   tooltipPosition?: TooltipProps['placement'];
   disabled?: boolean;
 }

src/components/MainMenu/MainMenu.tsx

@@ -1,12 +1,49 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
+import { Menu, MenuItem } from '@mui/material';
+import { Menu as MenuIcon } from '@mui/icons-material';
 import { UiElement } from 'src/components/UiElement/UiElement';
 import { IconButton } from 'src/components/IconButton/IconButton';
-import { Menu as MenuIcon } from '@mui/icons-material';
+import { useUiStateStore } from 'src/stores/uiStateStore';
 
 export const MainMenu = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const isMainMenuOpen = useUiStateStore((state) => {
+    return state.isMainMenuOpen;
+  });
+  const setIsMainMenuOpen = useUiStateStore((state) => {
+    return state.actions.setIsMainMenuOpen;
+  });
+
+  const onClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      setAnchorEl(event.currentTarget);
+      setIsMainMenuOpen(true);
+    },
+    [setIsMainMenuOpen]
+  );
+
   return (
     <UiElement>
-      <IconButton Icon={<MenuIcon />} name="Main menu" onClick={() => {}} />
+      <IconButton Icon={<MenuIcon />} name="Main menu" onClick={onClick} />
+
+      <Menu
+        anchorEl={anchorEl}
+        open={isMainMenuOpen}
+        onClose={() => {
+          return setIsMainMenuOpen(false);
+        }}
+        elevation={0}
+        sx={{
+          mt: 1
+        }}
+        MenuListProps={{
+          sx: {
+            minWidth: '250px'
+          }
+        }}
+      >
+        <MenuItem>Export</MenuItem>
+      </Menu>
     </UiElement>
   );
 };

src/stores/uiStateStore.tsx

@@ -12,6 +12,7 @@ const initialState = () => {
         showCursor: true,
         mousedownItem: null
       },
+      isMainMenuOpen: false,
       mouse: {
         position: { screen: CoordsUtils.zero(), tile: CoordsUtils.zero() },
         mousedown: null,
@@ -31,6 +32,9 @@ const initialState = () => {
         setMode: (mode) => {
           set({ mode });
         },
+        setIsMainMenuOpen: (isMainMenuOpen) => {
+          set({ isMainMenuOpen, itemControls: null });
+        },
         incrementZoom: () => {
           const { zoom } = get();
           set({ zoom: incrementZoom(zoom) });

src/types/ui.ts

@@ -121,6 +121,7 @@ export interface Scroll {
 export interface UiState {
   disableInteractions: boolean;
   mode: Mode;
+  isMainMenuOpen: boolean;
   itemControls: ItemControls;
   contextMenu: ContextMenu;
   zoom: number;
@@ -134,6 +135,7 @@ export interface UiStateActions {
   setMode: (mode: Mode) => void;
   incrementZoom: () => void;
   decrementZoom: () => void;
+  setIsMainMenuOpen: (isOpen: boolean) => void;
   setZoom: (zoom: number) => void;
   setScroll: (scroll: Scroll) => void;
   setItemControls: (itemControls: ItemControls) => void;