diff --git a/src/plugins/in-app-menu/renderer/Panel.tsx b/src/plugins/in-app-menu/renderer/Panel.tsx
index 9234095e..a71d71f2 100644
--- a/src/plugins/in-app-menu/renderer/Panel.tsx
+++ b/src/plugins/in-app-menu/renderer/Panel.tsx
@@ -132,6 +132,7 @@ export const Panel = (props: PanelProps) => {
         <Show when={local.open}>
           <ul
             {...leftProps}
+            id={'sub-panel'}
             ref={setPanel}
             class={panelStyle()}
             style={{
diff --git a/src/plugins/in-app-menu/renderer/TitleBar.tsx b/src/plugins/in-app-menu/renderer/TitleBar.tsx
index aad30828..0a5163a0 100644
--- a/src/plugins/in-app-menu/renderer/TitleBar.tsx
+++ b/src/plugins/in-app-menu/renderer/TitleBar.tsx
@@ -244,6 +244,19 @@ export const TitleBar = (props: TitleBarProps) => {
 
     props.ipc.on('window-maximize', refetchMaximize);
     props.ipc.on('window-unmaximize', refetchMaximize);
+
+    // close menu when the outside of the panel or sub-panel is clicked
+    document.body.addEventListener('click', (e) => {
+      if (
+        e.target instanceof HTMLElement &&
+        !(
+          e.target.closest('#main-panel') ||
+          e.target.closest('#sub-panel')
+        )
+      ) {
+        setOpenTarget(null);
+      }
+    });
   });
 
   createEffect(() => {
@@ -253,7 +266,7 @@ export const TitleBar = (props: TitleBarProps) => {
   });
 
   return (
-    <nav class={titleStyle()} data-macos={props.isMacOS}>
+    <nav id={'main-panel'} class={titleStyle()} data-macos={props.isMacOS}>
       <IconButton
         onClick={() => setCollapsed(!collapsed())}
         style={{