3 files changed, 156 insertions, 0 deletions
diff --git a/FrontEnd/src/app/views/common/FullPage.tsx b/FrontEnd/src/app/views/common/FullPage.tsx
new file mode 100644
index 00000000..09b01647
--- /dev/null
+++ b/FrontEnd/src/app/views/common/FullPage.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export interface FullPageProps {
+  show: boolean;
+  onBack: () => void;
+  contentContainerClassName?: string;
+}
+
+const FullPage: React.FC<FullPageProps> = ({
+  show,
+  onBack,
+  children,
+  contentContainerClassName,
+}) => {
+  return (
+    <div
+      className="cru-full-page"
+      style={{ display: show ? undefined : "none" }}
+    >
+      <div className="cru-full-page-top-bar">
+        <i
+          className="icon-button bi-arrow-left text-white ml-3"
+          onClick={onBack}
+        />
+      </div>
+      <div className={contentContainerClassName}>{children}</div>
+    </div>
+  );
+};
+
+export default FullPage;
diff --git a/FrontEnd/src/app/views/common/Menu.tsx b/FrontEnd/src/app/views/common/Menu.tsx
new file mode 100644
index 00000000..c2110c9c
--- /dev/null
+++ b/FrontEnd/src/app/views/common/Menu.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import clsx from "clsx";
+import { OverlayTrigger, OverlayTriggerProps, Popover } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+
+import { BootstrapThemeColor, convertI18nText, I18nText } from "@/common";
+
+export type MenuItem =
+  | {
+      type: "divider";
+    }
+  | {
+      type: "button";
+      text: I18nText;
+      color?: BootstrapThemeColor;
+      onClick: () => void;
+    };
+
+export type MenuItems = MenuItem[];
+
+export interface MenuProps {
+  items: MenuItems;
+  className?: string;
+  onItemClicked?: () => void;
+}
+
+const Menu: React.FC<MenuProps> = ({ items, className, onItemClicked }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={clsx("cru-menu", className)}>
+      {items.map((item) => {
+        if (item.type === "divider") {
+          return <div className="cru-menu-divider" />;
+        } else {
+          return (
+            <div
+              className={clsx(
+                "cru-menu-item",
+                `color-${item.color ?? "primary"}`
+              )}
+              onClick={() => {
+                item.onClick();
+                onItemClicked?.();
+              }}
+            >
+              {convertI18nText(item.text, t)}
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};
+
+export default Menu;
+
+export interface PopupMenuProps {
+  items: MenuItems;
+  children: OverlayTriggerProps["children"];
+}
+
+export const PopupMenu: React.FC<PopupMenuProps> = ({ items, children }) => {
+  const [show, setShow] = React.useState<boolean>(false);
+  const toggle = (): void => setShow(!show);
+
+  return (
+    <OverlayTrigger
+      trigger="click"
+      placement="bottom"
+      rootClose
+      overlay={
+        <Popover id="menu-popover">
+          <Menu items={items} onItemClicked={() => setShow(false)} />
+        </Popover>
+      }
+      show={show}
+      onToggle={toggle}
+    >
+      {children}
+    </OverlayTrigger>
+  );
+};
diff --git a/FrontEnd/src/app/views/common/common.sass b/FrontEnd/src/app/views/common/common.sass
index e2ee8978..329ea683 100644
--- a/FrontEnd/src/app/views/common/common.sass
+++ b/FrontEnd/src/app/views/common/common.sass
@@ -43,3 +43,45 @@
 
   &.last
     width: 50%
+
+.cru-full-page
+  position: fixed
+  z-index: 1031
+  left: 0
+  top: 0
+  right: 0
+  bottom: 0
+  background-color: white
+  padding-top: 56px
+
+.cru-full-page-top-bar
+  height: 56px
+
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  z-index: 1
+
+  @extend .bg-primary
+
+  display: flex
+  align-items: center
+
+.cru-menu
+  min-width: 200px
+
+.cru-menu-item
+  font-size: 1.2em
+  padding: 0.5em 1.5em
+  cursor: pointer
+
+  @each $color, $value in $theme-colors
+    &.color-#{$color}
+      color: $value
+
+      &:hover
+        color: white
+        background-color: $value
+
+.cru-menu-divider