feat: menu

src/icons/index.ts

@@ -6,7 +6,9 @@ export { default as CaretLeftIcon } from "./CaretLeftIcon.svg";
 export { default as CaretRightIcon } from "./CaretRightIcon.svg";
 export { default as CaretUpDownIcon } from "./CaretUpDownIcon.svg";
 export { default as CheckIcon } from "./CheckIcon.svg";
+export { default as EditIcon } from "./EditIcon.svg";
 export { default as MoreVerticalIcon } from "./MoreVerticalIcon.svg";
 export { default as PlusIcon } from "./PlusIcon.svg";
+export { default as RemoveIcon } from "./RemoveIcon.svg";
 export { default as VerticalDragAndDropIcon } from "./VerticalDragAndDropIcon.svg";
 export { default as XIcon } from "./XIcon.svg";

src/stories/components/Menu.mdx

@@ -0,0 +1,15 @@
+import { Meta } from "@storybook/blocks";
+import { UnstyledWithTheme } from "../../components/UnstyledWithTheme";
+import EditIcon from '../../icons/EditIcon.svg';
+import RemoveIcon from '../../icons/RemoveIcon.svg';
+
+<Meta title="Components/Menu" />
+
+# Menu
+
+<UnstyledWithTheme>
+  <div className="menu">
+    <div className="menu-item"><EditIcon width="14" height="auto" />Edit Transfer</div>
+    <div className="menu-item menu-item-danger"><RemoveIcon width="14" height="auto" />Remove Transaction</div>
+  </div>
+</UnstyledWithTheme>

src/styles/components/menu.css

@@ -0,0 +1,56 @@
+:root {
+  --menu-background: var(--white);
+  --menu-border: var(--neutral-1);
+  --menu-item-color: var(--neutral-8);
+  --menu-item-background-on-hover: var(--neutral-0);
+  --menu-item-danger-color: rgb(219 31 31);
+  --menu-item-danger-background-on-hover: rgb(255 0 0 / 10%);
+}
+
+.dark-theme {
+  --menu-background: var(--neutral-8);
+  --menu-border: var(--neutral-7);
+  --menu-item-color: var(--neutral-1);
+  --menu-item-background-on-hover: var(--neutral-7);
+  --menu-item-danger-color: rgb(219 31 31);
+  --menu-item-danger-background-on-hover: rgb(255 0 0 / 10%);
+}
+
+.menu {
+  --menu-item-padding: var(--space-3);
+  --menu-item-corner-radius: var(--corner-5);
+
+  z-index: 100;
+
+  width: max-content;
+  padding: var(--menu-item-padding);
+
+  background: var(--menu-background);
+  border: 1px solid var(--menu-border);
+  border-radius: var(--menu-item-corner-radius);
+}
+
+.menu-item {
+  cursor: pointer;
+
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  padding: var(--space-5);
+
+  color: var(--menu-item-color);
+}
+
+.menu-item:hover,
+.menu-item:focus {
+  background: var(--menu-item-background-on-hover);
+  border-radius: calc(
+    var(--menu-item-corner-radius) - var(--menu-item-padding)
+  );
+}
+
+.menu-item-danger {
+  --menu-item-color: var(--menu-item-danger-color);
+  --menu-item-background-on-hover: var(--menu-item-danger-background-on-hover);
+}

src/styles/main.css

@@ -21,6 +21,7 @@
 @import "./components/widget.css";
 @import "./components/subscription.css";
 @import "./components/monthly-report.css";
+@import "./components/menu.css";
 
 @import "./components/dialog.css";
 @import "./components/date-picker.css";