feat: add Menu component

packages/app/src/ui/menu/index.ts

@@ -0,0 +1,2 @@
+export * from './menu';
+export { StyledMenuItem as MenuItem } from './styles';

packages/app/src/ui/menu/menu.tsx

@@ -0,0 +1,20 @@
+import { Popper, type PopperProps } from '../popper';
+import { TooltipProps } from '@mui/material';
+import { StyledMenuWrapper } from '@/ui/menu/styles';
+
+export const Menu = (props: PopperProps & Omit<TooltipProps, 'title'>) => {
+  const { content, placement = 'bottom-start', children } = props;
+  return content ? (
+    <Popper
+      {...props}
+      showArrow={false}
+      content={
+        <StyledMenuWrapper placement={placement}>{content}</StyledMenuWrapper>
+      }
+    >
+      {children}
+    </Popper>
+  ) : null;
+};
+
+export default Menu;

packages/app/src/ui/menu/styles.ts

@@ -0,0 +1,34 @@
+import { styled } from '@/styles';
+import StyledPopperContainer from '../shared/Container';
+
+export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
+  return {
+    background: theme.colors.popoverBackground,
+    padding: '8px 4px',
+    fontSize: '14px',
+    backgroundColor: theme.colors.popoverBackground,
+    boxShadow: theme.shadow.popover,
+    color: theme.colors.popoverColor,
+  };
+});
+
+export const StyledMenuItem = styled('div')<{ popperVisible?: boolean }>(
+  ({ theme, popperVisible }) => {
+    return {
+      borderRadius: '5px',
+      padding: '0 14px',
+
+      color: popperVisible
+        ? theme.colors.primaryColor
+        : theme.colors.popoverColor,
+      backgroundColor: popperVisible
+        ? theme.colors.hoverBackground
+        : 'transparent',
+
+      ':hover': {
+        color: theme.colors.primaryColor,
+        backgroundColor: theme.colors.hoverBackground,
+      },
+    };
+  }
+);