feature: begin creating modal component

-  fix bug in NewWindow comp

GUI/ETVR/src/components/Modal/index.tsx

@@ -0,0 +1,48 @@
+import { Button, HStack, Modal, Text } from '@hope-ui/core'
+import { children, createSignal, createEffect, Show, onMount } from 'solid-js'
+import { openModalStatus } from '@src/store/ui/selectors'
+import { setOpenModal, type IModalMenu } from '@src/store/ui/ui'
+import './styles.css'
+
+const ModalMenu = (props: IModalMenu) => {
+    const [ref, setRef] = createSignal<HTMLElement>()
+    const Children = children(() => props.children)
+    const clickOutside = (e: MouseEvent) => {
+        if (e.target instanceof HTMLElement) {
+            if (ref() && (ref()?.contains(e.target) || ref()?.isSameNode(e.target))) return
+            console.log('clicked outside')
+            setOpenModal(false)
+        }
+    }
+    createEffect(() => {
+        if (openModalStatus()) {
+            document.addEventListener('click', clickOutside)
+            return
+        }
+        document.removeEventListener('click', clickOutside)
+    })
+    return (
+        <>
+            <Modal
+                isOpen={openModalStatus() ?? false}
+                onClose={() => setOpenModal(false)}
+                initialFocusSelector="#initial-focus">
+                <Modal.Overlay />
+                <Modal.Content p={4}>
+                    <HStack justifyContent="space-between" mb={4}>
+                        <Modal.Heading fontWeight="semibold">Title</Modal.Heading>
+                        <Modal.CloseButton />
+                    </HStack>
+                    <Text mb={4}>The content of the Modal.</Text>
+                    <HStack justifyContent="flex-end" spacing={4}>
+                        <Button id="initial-focus" _focus={{ color: 'red' }}>
+                            Action
+                        </Button>
+                    </HStack>
+                </Modal.Content>
+            </Modal>
+        </>
+    )
+}
+
+export default ModalMenu

GUI/ETVR/src/components/NewWindow/index.tsx

@@ -11,12 +11,10 @@ const NewMenu = (props: INewMenu) => {
         if (e.target instanceof HTMLElement) {
             if (ref() && (ref()?.contains(e.target) || ref()?.isSameNode(e.target))) return
             console.log('clicked outside')
-            document.documentElement.style.setProperty(props.cssVariable, 'hidden')
             setMenu(null)
         }
     }
     onMount(() => {
-        document.documentElement.style.setProperty(props.cssVariable, 'hidden')
         if (props.ref) {
             props.ref.addEventListener('contextmenu', (e) => {
                 e.preventDefault()
@@ -35,7 +33,7 @@ const NewMenu = (props: INewMenu) => {
     })
     return (
         <div>
-            <Show when={menuOpenStatus}>
+            <Show when={menuOpenStatus() ?? false}>
                 <Portal mount={props?.ref as HTMLElement}>
                     <div
                         ref={setRef}

GUI/ETVR/src/components/NewWindow/styles.css

@@ -8,7 +8,6 @@
 	width: fit-content;
 	border-radius: 3px;
 	z-index: 999;
-	visibility: var(--menu-visibility);
 }
 
 .context-menu button {

GUI/ETVR/src/store/ui/ui.ts

@@ -18,6 +18,11 @@ export interface INewMenu {
     cssVariable: string
 }
 
+export interface IModalMenu {
+    children: JSXElement
+    ref: HTMLElement | null
+}
+
 interface IUiStore {
     loader?: { [key in loaderType]: boolean }
     connecting?: boolean