3 files changed, 68 insertions, 13 deletions
diff --git a/FrontEnd/src/views/common/menu/Menu.tsx b/FrontEnd/src/views/common/menu/Menu.tsx
index 7523247d..04243fa3 100644
--- a/FrontEnd/src/views/common/menu/Menu.tsx
+++ b/FrontEnd/src/views/common/menu/Menu.tsx
@@ -5,6 +5,8 @@ import { useTranslation } from "react-i18next";
 import { convertI18nText, I18nText } from "@/common";
 import { PaletteColorType } from "@/palette";
 
+import "./Menu.css";
+
 export type MenuItem =
   | {
       type: "divider";
@@ -19,17 +21,23 @@ export type MenuItem =
 
 export type MenuItems = MenuItem[];
 
-export interface MenuProps {
+export type MenuProps = {
   items: MenuItems;
-  className?: string;
   onItemClicked?: () => void;
-}
+  className?: string;
+  style?: React.CSSProperties;
+};
 
-const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
+export default function _Menu({
+  items,
+  onItemClicked,
+  className,
+  style,
+}: MenuProps): React.ReactElement | null {
   const { t } = useTranslation();
 
   return (
-    <div className={classnames("cru-menu", className)}>
+    <div className={classnames("cru-menu", className)} style={style}>
       {items.map((item, index) => {
         if (item.type === "divider") {
           return <div key={index} className="cru-menu-divider" />;
@@ -61,6 +69,4 @@ const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
       })}
     </div>
   );
-};
-
-export default Menu;
+}
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.css b/FrontEnd/src/views/common/menu/PopupMenu.css
new file mode 100644
index 00000000..8465a1bb
--- /dev/null
+++ b/FrontEnd/src/views/common/menu/PopupMenu.css
@@ -0,0 +1,3 @@
+.cru-popup-menu-menu-container {
+
+}
diff --git a/FrontEnd/src/views/common/menu/PopupMenu.tsx b/FrontEnd/src/views/common/menu/PopupMenu.tsx
index 0d447f09..50f80a91 100644
--- a/FrontEnd/src/views/common/menu/PopupMenu.tsx
+++ b/FrontEnd/src/views/common/menu/PopupMenu.tsx
@@ -1,17 +1,63 @@
+import classNames from "classnames";
 import React from "react";
+import { usePopper } from "react-popper";
 
 import Menu, { MenuItems } from "./Menu";
 
+import "./PopupMenu.css";
+
 export interface PopupMenuProps {
   items: MenuItems;
-  children: React.ReactElement;
+  children?: React.ReactNode;
+  containerClassName?: string;
+  containerStyle?: React.CSSProperties;
 }
 
-export const PopupMenu: React.FC<PopupMenuProps> = ({ items, children }) => {
+const PopupMenu: React.FC<PopupMenuProps> = ({
+  items,
+  children,
+  containerClassName,
+  containerStyle,
+}) => {
   const [show, setShow] = React.useState<boolean>(false);
-  const toggle = (): void => setShow(!show);
 
-  // TODO:
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+  const [arrowElement, setArrowElement] = React.useState<HTMLDivElement | null>(
+    null
+  );
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    modifiers: [{ name: "arrow", options: { element: arrowElement } }],
+  });
 
-  return <Menu items={items} onItemClicked={() => setShow(false)} />;
+  return (
+    <>
+      <div
+        ref={setReferenceElement}
+        className={classNames(
+          "cru-popup-menu-trigger-container",
+          containerClassName
+        )}
+        style={containerStyle}
+        onClick={() => setShow(true)}
+      >
+        {children}
+      </div>
+      {show ? (
+        <div
+          ref={setPopperElement}
+          className="cru-popup-menu-menu-container"
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <Menu items={items} />
+          <div ref={setArrowElement} style={styles.arrow} />
+        </div>
+      ) : null}
+    </>
+  );
 };
+
+export default PopupMenu;