-
-
-
- {route.name === 'messages' &&
}
- {route.name === 'nodes' &&
}
- {route.name === 'map' &&
}
- {route.name === 'extensions' &&
}
- {route.name === false &&
}
+
+
+
+
+ {route.name === 'messages' && }
+ {route.name === 'nodes' && }
+ {route.name === 'map' && }
+ {route.name === 'extensions' && }
+ {route.name === false && }
+
+
+
);
};
diff --git a/src/components/generic/ContextMenu.tsx b/src/components/generic/ContextMenu.tsx
new file mode 100644
index 00000000..d3c11808
--- /dev/null
+++ b/src/components/generic/ContextMenu.tsx
@@ -0,0 +1,93 @@
+import React from 'react';
+
+import { m } from 'framer-motion';
+import { FiActivity, FiAperture, FiTag } from 'react-icons/fi';
+
+export interface ContextMenuProps {
+ children: React.ReactNode;
+}
+
+export const ContextMenu = ({ children }: ContextMenuProps): JSX.Element => {
+ const [visible, setVisible] = React.useState(false);
+ const [position, setPosition] = React.useState({ x: 0, y: 0 });
+ const [selectedValue, setSelectedValue] = React.useState
();
+ const doSomething = (selectedValue: string) => {
+ setSelectedValue(selectedValue);
+ };
+
+ const showContextMenu = (event: React.MouseEvent) => {
+ event.preventDefault();
+
+ setVisible(false);
+ const newPosition = {
+ x: event.pageX,
+ y: event.pageY,
+ };
+
+ setPosition(newPosition);
+ setVisible(true);
+ };
+
+ const hideContextMenu = (event: React.MouseEvent) => {
+ setVisible(false);
+ };
+
+ return (
+
+ {children}
+ {selectedValue &&
{selectedValue} is selected
}
+
+ {visible && (
+
+
+
+
+
+
+
+
+ Menu item 2
+
+
+
+
+
+
+
+
+
+ Menu item 3 with a very long name that should wrap
+
+
+
+
+ )}
+
FileName
Actions