From 625b734fde0555ddbd3393b0a1e55b1db85a8ebc Mon Sep 17 00:00:00 2001
From: Josh Remaley <joshremaley@gmail.com>
Date: Tue, 14 Feb 2023 16:47:28 -0600
Subject: [PATCH] add close menu button to exit menu

---
 packages/app/src/Element/Note.css       | 12 ++++++++++++
 packages/app/src/Element/NoteFooter.tsx |  7 +++++++
 2 files changed, 19 insertions(+)

diff --git a/packages/app/src/Element/Note.css b/packages/app/src/Element/Note.css
index 5e717c8e..680972ab 100644
--- a/packages/app/src/Element/Note.css
+++ b/packages/app/src/Element/Note.css
@@ -218,3 +218,15 @@
 .note .reactions-link:hover {
   text-decoration: underline;
 }
+
+.close-menu {
+  position: absolute;
+  width: 100vw;
+  height: 100vh;
+  top: -400px;
+  left: -600px;
+}
+
+.close-menu-container {
+  position: absolute;
+}
diff --git a/packages/app/src/Element/NoteFooter.tsx b/packages/app/src/Element/NoteFooter.tsx
index 79dd54b4..f35e3781 100644
--- a/packages/app/src/Element/NoteFooter.tsx
+++ b/packages/app/src/Element/NoteFooter.tsx
@@ -209,6 +209,13 @@ export default function NoteFooter(props: NoteFooterProps) {
   function menuItems() {
     return (
       <>
+        <div className="close-menu-container">
+          {/* This menu item serves as a "close menu" button;
+          it allows the user to click anywhere nearby the menu to close it. */}
+          <MenuItem>
+            <div className="close-menu" />
+          </MenuItem>
+        </div>
         {prefs.enableReactions && (
           <MenuItem onClick={() => setShowReactions(true)}>
             <Heart />