Close side menu after app is chosen on landscape screen

Author: Shellishack

web/components/explorer/app/app-explorer.tsx

@@ -1,5 +1,6 @@
 import ExtensionPreview from "@/components/extension/extension-preview";
 import { EditorContext } from "@/components/providers/editor-context-provider";
+import { useScreenSize } from "@/lib/hooks/use-screen-size";
 import { useTabViewManager } from "@/lib/hooks/use-tab-view-manager";
 import { AppViewConfig } from "@/lib/types";
 import { Button } from "@heroui/react";
@@ -10,6 +11,7 @@ export default function AppExplorer() {
   const editorContext = useContext(EditorContext);
 
   const { createAppViewInCanvasView } = useTabViewManager();
+  const { isLandscape } = useScreenSize();
 
   const extensions = editorContext?.persistSettings?.extensions ?? [];
 
@@ -36,6 +38,13 @@ export default function AppExplorer() {
             recommendedWidth: ext.config.recommendedWidth,
           };
           createAppViewInCanvasView(config);
+          console.log("Is Landscape:", isLandscape);
+          if (!isLandscape) {
+            editorContext?.setEditorStates((prev) => ({
+              ...prev,
+              isSideMenuOpen: false,
+            }));
+          }
         }}
       />
     </div>

web/components/interface/navigation/nav-side-menu.tsx

@@ -4,12 +4,12 @@ import Tabs from "@/components/misc/tabs";
 import ProjectSettingsModal from "@/components/modals/project-settings-modal";
 import { EditorContext } from "@/components/providers/editor-context-provider";
 import useExplorer from "@/lib/hooks/use-explorer";
+import { useScreenSize } from "@/lib/hooks/use-screen-size";
 import { isWeb } from "@/lib/platform-api/platform-checker";
 import { TabItem } from "@/lib/types";
 import { Button } from "@heroui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { useContext, useState } from "react";
-import { useMediaQuery } from "react-responsive";
 import FileSystemExplorer from "../../explorer/file-system/fs-explorer";
 import Icon from "../../misc/icon";
 
@@ -55,9 +55,7 @@ export default function NavSideMenu({
 }
 
 function MenuPanel({ children }: { children?: React.ReactNode }) {
-  const isLandscape = useMediaQuery({
-    query: "(min-width: 768px)",
-  });
+  const { isLandscape } = useScreenSize();
 
   return (
     <>

web/lib/hooks/use-screen-size.ts

@@ -0,0 +1,8 @@
+import { useMediaQuery } from "react-responsive";
+
+export function useScreenSize() {
+  const isLandscape = useMediaQuery({
+    query: "(min-width: 768px)",
+  });
+  return { isLandscape };
+}

web/lib/platform-api/platform-checker.ts

@@ -1,6 +1,6 @@
+import { PlatformEnum } from "@/lib/types";
 import { Capacitor } from "@capacitor/core";
 import isElectron from "is-electron";
-import { PlatformEnum } from "@/lib/types";
 
 export function getPlatform() {
   // Capacitor

web/package.json

@@ -8,7 +8,7 @@
       "build": "next build",
       "lint": "next lint",
       "start": "serve ../build/next",
-      "dev-https": "next dev  --experimental-https"
+      "dev-https": "next dev --experimental-https"
    },
    "dependencies": {
       "@capacitor-community/safe-area": "^7.0.0-alpha.1",