feat(ui): abstract out the global menu close trigger

This logic is moved into a hook.

This is needed for our context menus to close when the user clicks something in reactflow. It needed to be extended to support menus also.

invokeai/frontend/web/src/features/system/components/SiteHeader.tsx

@@ -6,6 +6,7 @@ import {
   MenuItem,
   MenuList,
   Spacer,
+  useDisclosure,
 } from '@chakra-ui/react';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { memo } from 'react';
@@ -24,9 +25,12 @@ import HotkeysModal from './HotkeysModal/HotkeysModal';
 import InvokeAILogoComponent from './InvokeAILogoComponent';
 import SettingsModal from './SettingsModal/SettingsModal';
 import StatusIndicator from './StatusIndicator';
+import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger';
 
 const SiteHeader = () => {
   const { t } = useTranslation();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  useGlobalMenuCloseTrigger(onClose);
 
   const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
   const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
@@ -46,7 +50,7 @@ const SiteHeader = () => {
       <Spacer />
       <StatusIndicator />
 
-      <Menu>
+      <Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
         <MenuButton
           as={IAIIconButton}
           variant="link"