attempted to fix an error with context

src/App.tsx

@@ -12,7 +12,6 @@ function App() {
     initialize();
   }, []);
   init();
-  document.addEventListener('contextmenu', function(e) {e.preventDefault();});
   return <Routes>
       <Route path="/" element={login()}></Route>
       <Route path="/signup" element={signup()}></Route>

src/pages/login/loading.tsx

@@ -19,7 +19,7 @@ function loading(){
         });
     }, []);
 
-    return <div id='background'>
+    return <div id='background' onContextMenu={e => e.preventDefault()}>
 
 <div className='triangle down'></div>
         <div className='triangle left'></div>

src/pages/login/login.tsx

@@ -25,7 +25,7 @@ function login(){
 
 
 
-        return <div id='background'>
+        return <div id='background' onContextMenu={e => e.preventDefault()}>
 
 
 

src/pages/login/signup.tsx

@@ -13,7 +13,7 @@ function Login() {
     }
 
     return (
-        <div id='background'>
+        <div id='background' onContextMenu={e => e.preventDefault()}>
             <div className='triangle down'></div>
             <div className='triangle left'></div>
             <button className='upperbutton' aria-current={false} onClick={() => navigate("/")}>Login</button>

src/pages/main_page/internal_apps/App.css

@@ -122,5 +122,7 @@
 }
 
 .ContextMenu{
+    height: 10svh;
+    position: fixed;
     background-color: aliceblue;
 }

src/pages/main_page/internal_apps/App.tsx

@@ -1,5 +1,3 @@
-            //@ts-expect-error
-
 import React, { useState, RefObject } from "react";
 import { useDraggable } from '../Grid';
 import './App.css';

src/pages/main_page/internal_apps/file_system.tsx

@@ -12,8 +12,14 @@ function file_system() : [JSX.Element, React.Dispatch<React.SetStateAction<strin
 
     const [{dx, dy}, set_positions] = useState({dx: 0, dy: 0});
     const [ctx_display, set_ctx_display] = useState('none');
-    const right_click = (ev: MouseEvent) => {
+    useEffect(() => {
+        document.addEventListener("click", () => set_ctx_display('none'));
+        return () => document.removeEventListener("click", () => set_ctx_display('none'));
+    }, [])
+
+    const right_click = (ev: React.MouseEvent) => {
         //set_context({x: ev.clientX, y: ev.clientY});
+        ev.preventDefault();
         console.log("right clicked");
         //set_menu(true);
         set_ctx_display('inherit');
@@ -22,25 +28,18 @@ function file_system() : [JSX.Element, React.Dispatch<React.SetStateAction<strin
     const left_click = () =>{
         if (ctx_display) {set_ctx_display('none');}
     }
-    useEffect(() => {
-        document.addEventListener('contextmenu', right_click);
-        document.addEventListener('click', left_click);
-        return () => {
-            document.removeEventListener('contextmenu', right_click);
-            document.removeEventListener('click', left_click);
-        };
-    }, []); 
     let Application = <div className='ApplicationDirectory'>
             <h1 className='filesystemtxt2'>/{location}/</h1>
 
             <div className='ContextMenu'
             style={{
-                transform: `translate3d(${dx}px, ${dy}px, 0)`,
+                top: `${dy}px`,
+                left: `${dx}px`,
                 display: `${ctx_display}`,
             }}
-            ><h1>test</h1></div>
+            ><h1>test</h1><h1>test 2</h1></div>
         </div>   
-    let app_html = <div className='frametest2'>
+    let app_html = <div className='frametest2' onContextMenu={right_click}>
     {Application}
     </div>;
     const [display, set_display] = useState('none');

src/pages/main_page/main_page.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import './main_page.css';
 import Grid from './Grid';
 import folder from './assets/folder.png';
@@ -17,10 +17,10 @@ export default function MainPage() {
     const terminal = desktop_app("Terminal", terminald, () => {});
     const [menu, set_menu] = useState(false);
     return (
-        <div id='background'>
+        <div id='background' onContextMenu={e => {e.preventDefault();}}>
             {app}
-            <Grid apps={[example_app, not_example_app, terminal]} gridSize={50} margin={120} />
-            <nav className='navbar'>
+            <Grid  apps={[example_app, not_example_app, terminal]} gridSize={50} margin={120} />
+            <nav className='navbar' onContextMenu={e => e.preventDefault()}>
                 <img className='homeimg' onClick={() => set_menu(!menu)} src={menu_icon} alt="" />
                 <img className='searchimg' src={search} alt="" />
                 <img className='terminalimg' src={terminald} alt="" />