Fixed menu closing problem

Author: keiono

simple-menu/src/components/AppMenuItem.tsx

@@ -1,4 +1,6 @@
 import { MenuItem } from '@mui/material'
+import { useState } from 'react'
+import MessageDialog from './MessageDialog'
 
 interface AppMenuItemProps {
   title: string
@@ -13,13 +15,30 @@ interface AppMenuItemProps {
  */
 const AppMenuItem = ({
   title = 'Simple Menu Example',
+  handleClose,
 }: AppMenuItemProps): JSX.Element => {
+  const [dialogOpen, setDialogOpen] = useState(false)
+
+  const handleCloseDialog = () => {
+    setDialogOpen(false)
+    handleClose && handleClose()
+  }
+
   const handleClick = (): void => {
-    console.log('Click detected in external app')
-    alert('Hello from the external app! (AppMenuItem)')
+    console.log('Click detected in Simple Menu app')
+    setDialogOpen(true)
   }
 
-  return <MenuItem onClick={handleClick}>{title}</MenuItem>
+  return (
+    <>
+      <MenuItem onClick={handleClick}>{title}</MenuItem>
+      <MessageDialog
+        open={dialogOpen}
+        onClose={handleCloseDialog}
+        message="Hello from the Simple Menu app! (AppMenuItem)"
+      />
+    </>
+  )
 }
 
 export default AppMenuItem

simple-menu/src/components/MessageDialog.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+
+interface MessageDialogProps {
+  open: boolean
+  onClose: () => void
+  message: string
+}
+
+const MessageDialog: React.FC<MessageDialogProps> = ({
+  open,
+  onClose,
+  message,
+}) => {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>Simple Menu App</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{message}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="primary">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default MessageDialog