Better context menu UI

src/css/components/ContextMenu.scss

@@ -1,5 +1,5 @@
 .ContextMenu {
-    @apply absolute hidden;
+    @apply absolute hidden flex-col;
 
     padding: 5px;
     border-radius: 5px;
@@ -17,6 +17,7 @@
     border-radius: 5px;
 
     &:hover {
+        user-select: none;
         background-color: #0c0c0c;
     }
 }

src/ui/components/common/ContextMenu.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 
+import { openContext } from "@utils/context";
+
 import "@css/components/ContextMenu.scss";
 
 export type ContextOption = {
@@ -34,6 +36,8 @@ export function showMenu(id: string, x: number, y: number): void {
         menu.style.display = "flex";
         menu.style.left = x + "px";
         menu.style.top = y + "px";
+
+        openContext(menu);
     }
 }
 

src/utils/context.ts

@@ -0,0 +1,30 @@
+let currentContext: HTMLElement | null = null;
+window.addEventListener("click", closeContext);
+
+/**
+ * Handles clicking around the page.
+ *
+ * @param e The event.
+ */
+export function closeContext(e: MouseEvent): void {
+    // Check if the click was within the confines of the context menu.
+    if (currentContext && !currentContext.contains(e.target as Node)) {
+        currentContext.style.display = "none";
+        currentContext = null;
+    }
+}
+
+/**
+ * Sets the current context menu.
+ *
+ * @param element The context menu to set.
+ */
+export function openContext(element: HTMLElement): void {
+    // Close any open context menus.
+    if (currentContext) {
+        currentContext.style.display = "none";
+    }
+
+    // Set the current context menu.
+    currentContext = element;
+}