feat: make use of useState to show and hide context menu rather than manually rendering and unrendering

utils/createContextMenu.ts

@@ -1,17 +0,0 @@
-import { render } from "vue";
-import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
-import type { ContextMenuItem } from "~/types/interfaces";
-
-export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {
-  console.log("Rendering new context menu");
-  const menuContainer = document.createElement("div");
-  menuContainer.id = "context-menu";
-  document.body.appendChild(menuContainer);
-  const contextMenu = h(ContextMenu, {
-  	menuItems,
-  	cursorX: e.clientX,
-  	cursorY: e.clientY 
-  });
-  render(contextMenu, menuContainer);
-  console.log("Rendered");
-}

utils/removeContextMenu.ts

@@ -1,6 +1,12 @@
-export default () => {
-	const contextMenu = document.getElementById("context-menu");
-	if (contextMenu) {
-		contextMenu.remove();
+import type { ContextMenuInterface } from "~/types/interfaces";
+
+export default (contextMenu: Ref<ContextMenuInterface>) => {
+	console.log("resetting and hiding context menu");
+	contextMenu.value = {
+		show: false,
+		cursorX: 0,
+		cursorY: 0,
+		items: []
 	}
+	console.log("hidden context menu");
 }

utils/showContextMenu.ts

@@ -0,0 +1,12 @@
+import { render } from "vue";
+import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
+import type { ContextMenuInterface, ContextMenuItem } from "~/types/interfaces";
+
+export default (e: MouseEvent, contextMenu: ContextMenuInterface, menuItems: ContextMenuItem[]) => {
+  console.log("Showing context menu");
+  contextMenu.show = true;
+  contextMenu.cursorX = e.clientX;
+  contextMenu.cursorY = e.clientY;
+  contextMenu.items = menuItems;
+  console.log("Showed");
+}