feat: allows main menu to be hidden

src/Isoflow.tsx

@@ -29,6 +29,7 @@ interface Props {
   width?: number | string;
   height?: number | string;
   debugMode?: boolean;
+  hideMainMenu?: boolean;
 }
 
 const App = ({
@@ -37,7 +38,8 @@ const App = ({
   height = '100%',
   disableInteractions: disableInteractionsProp,
   onSceneUpdated,
-  debugMode = false
+  debugMode = false,
+  hideMainMenu = false
 }: Props) => {
   const prevInitialScene = useRef<SceneInput>(INITIAL_SCENE);
   const [isReady, setIsReady] = useState(false);
@@ -57,9 +59,16 @@ const App = ({
   const { setIconCategoriesState } = useIconCategories();
 
   useEffect(() => {
+    uiActions.setHideMainMenu(hideMainMenu);
     uiActions.setZoom(initialScene?.zoom ?? 1);
     uiActions.setDisableInteractions(Boolean(disableInteractionsProp));
-  }, [initialScene?.zoom, disableInteractionsProp, sceneActions, uiActions]);
+  }, [
+    initialScene?.zoom,
+    disableInteractionsProp,
+    sceneActions,
+    uiActions,
+    hideMainMenu
+  ]);
 
   useEffect(() => {
     if (!initialScene || prevInitialScene.current === initialScene) return;

src/components/UiOverlay/UiOverlay.tsx

@@ -35,6 +35,9 @@ export const UiOverlay = () => {
   const sceneTitle = useSceneStore((state) => {
     return state.title;
   });
+  const hideMainMenu = useUiStateStore((state) => {
+    return state.hideMainMenu;
+  });
 
   if (disableInteractions) return null;
 
@@ -46,7 +49,7 @@ export const UiOverlay = () => {
             position: 'absolute',
             top: appPadding.y * 2 + spacing(2),
             left: appPadding.x,
-            width: '345px',
+            width: '360px',
             maxHeight: `calc(100% - ${toPx(appPadding.y * 6)})`,
             overflowY: 'scroll',
             '&::-webkit-scrollbar': {
@@ -84,15 +87,17 @@ export const UiOverlay = () => {
         <ZoomControls />
       </Box>
 
-      <Box
-        sx={{
-          position: 'absolute',
-          top: appPadding.y,
-          left: appPadding.x
-        }}
-      >
-        <MainMenu />
-      </Box>
+      {!hideMainMenu && (
+        <Box
+          sx={{
+            position: 'absolute',
+            top: appPadding.y,
+            left: appPadding.x
+          }}
+        >
+          <MainMenu />
+        </Box>
+      )}
 
       <UiElement
         sx={{

src/stores/uiStateStore.tsx

@@ -8,6 +8,7 @@ const initialState = () => {
     return {
       iconCategoriesState: [],
       disableInteractions: false,
+      hideMainMenu: false,
       mode: {
         type: 'CURSOR',
         showCursor: true,
@@ -51,6 +52,9 @@ const initialState = () => {
         setMode: (mode) => {
           set({ mode });
         },
+        setHideMainMenu: (state) => {
+          set({ hideMainMenu: state });
+        },
         setIsMainMenuOpen: (isMainMenuOpen) => {
           set({ isMainMenuOpen, itemControls: null });
         },

src/types/ui.ts

@@ -156,6 +156,7 @@ export type IconCollectionStateWithIcons = IconCollectionState & {
 export interface UiState {
   iconCategoriesState: IconCollectionState[];
   disableInteractions: boolean;
+  hideMainMenu: boolean;
   mode: Mode;
   isMainMenuOpen: boolean;
   itemControls: ItemControls;
@@ -171,6 +172,7 @@ export interface UiStateActions {
   setIconCategoriesState: (iconCategoriesState: IconCollectionState[]) => void;
   resetUiState: () => void;
   setMode: (mode: Mode) => void;
+  setHideMainMenu: (state: boolean) => void;
   incrementZoom: () => void;
   decrementZoom: () => void;
   setIsMainMenuOpen: (isOpen: boolean) => void;