Context menu

package.json

@@ -148,6 +148,7 @@
     "react-router-dom": "^6.24.1",
     "sharedb": "^5.0.2",
     "sharedb-client-browser": "^5.0.2",
+    "styled-components": "^6.1.12",
     "vizhub-ui": "^3.23.0",
     "ws": "^8.18.0"
   },

src/client/VZSidebar/ContextMenu.js

@@ -0,0 +1,27 @@
+import styled, { css } from "styled-components";
+
+export const ContextMenu = styled.div`
+  position: absolute;
+  width: 200px;
+  background-color: #383838;
+  border-radius: 5px;
+  box-sizing: border-box;
+  ${({ top, left }) => css`
+    top: ${top}px;
+    left: ${left}px;
+  `}
+  ul {
+    box-sizing: border-box;
+    padding: 10px;
+    margin: 0;
+    list-style: none;
+  }
+  ul li {
+    padding: 18px 12px;
+  }
+  /* hover */
+  ul li:hover {
+    cursor: pointer;
+    background-color: #000000;
+  }
+`;

src/client/VZSidebar/index.tsx

@@ -3,6 +3,7 @@ import {
   useContext,
   useMemo,
   useState,
+  useEffect
 } from 'react';
 import {
   FileId,
@@ -28,6 +29,7 @@ import { VZCodeContext } from '../VZCodeContext';
 import { Listing } from './Listing';
 import { useDragAndDrop } from './useDragAndDrop';
 import './styles.scss';
+import {ContextMenu} from "./ContextMenu.js"
 
 // TODO turn this UI back on when we are actually detecting
 // the connection status.
@@ -111,6 +113,20 @@ export const VZSidebar = ({
     handleDrop,
   } = useDragAndDrop();
 
+  const [clicked, setClicked] = useState(false);
+    const [points, setPoints] = useState({
+        x: 0,
+        y: 0,
+    });
+
+    useEffect(()=>{
+      const handleClick = () => setClicked(false);
+      window.addEventListener("click", handleClick);
+      return () => {
+          window.removeEventListener("click", handleClick);
+      };
+  }, []);
+
   return (
     <div
       className="vz-sidebar"
@@ -290,15 +306,27 @@ export const VZSidebar = ({
                   const { fileId } = entity as FileTreeFile;
                   const { path } = entity as FileTree;
                   const key = fileId ? fileId : path;
+
                   return (
-                    <Listing
-                      key={key}
-                      entity={entity}
-                      handleFileClick={handleFileClick}
-                      handleFileDoubleClick={
-                        handleFileDoubleClick
-                      }
-                    />
+                    <div
+                    onContextMenu={(e)=>{
+                      e.preventDefault();
+                      setClicked(true);
+                      setPoints({
+                          x: e.pageX,
+                          y: e.pageY
+                      });
+
+                    }}>
+                      <Listing
+                        key={key}
+                        entity={entity}
+                        handleFileClick={handleFileClick}
+                        handleFileDoubleClick={
+                          handleFileDoubleClick
+                        }
+                      />
+                    </div>
                   );
                 })
               ) : (
@@ -309,13 +337,26 @@ export const VZSidebar = ({
                     above to create your first file.
                   </div>
                 </div>
-              )}
+              )
+              }
             </div>
           ) : (
             <div className="sidebar-search">
               <Search />
             </div>
-          )}
+          )
+
+          }
+          {clicked && (
+            <ContextMenu top = {points.y} left = {points.x}>
+              <ul>
+                  <li>Edit</li>
+                  <li>Copy</li>
+                  <li>Delete</li>
+              </ul>
+            </ContextMenu>
+            )
+            }
         </div>
       </div>
 
@@ -332,5 +373,7 @@ export const VZSidebar = ({
         </div>
       )}
     </div>
+
+
   );
 };

src/client/VZSidebar/styles.scss

@@ -254,3 +254,4 @@
     }
   }
 }
+