added node edit menu

src/components/menu/MenuButton/index.tsx

@@ -0,0 +1,64 @@
+import React, { FC, ReactNode } from 'react';
+
+import classNames from 'classnames';
+import { Manager, Popper, Reference } from 'react-popper';
+
+import { Icon } from '~/components/input/Icon';
+import { useFocusEvent } from '~/hooks/dom/useFocusEvent';
+
+import styles from './styles.module.scss';
+
+interface MenuButtonProps {
+  icon?: ReactNode;
+  className?: string;
+}
+
+const modifiers = [
+  {
+    name: 'offset',
+    options: {
+      offset: [5, 10],
+    },
+  },
+];
+
+const MenuButton: FC<MenuButtonProps> = ({
+  children,
+  className,
+  icon = <Icon icon="dots-vertical" size={24} />,
+}) => {
+  const { focused, onFocus, onBlur } = useFocusEvent(false, 150);
+
+  return (
+    <Manager>
+      <Reference>
+        {({ ref }) => (
+          <button
+            className={classNames(styles.menu, className)}
+            ref={ref}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          >
+            {icon}
+          </button>
+        )}
+      </Reference>
+
+      {focused && (
+        <Popper placement="bottom-end" modifiers={modifiers}>
+          {({ style, ref, placement }) => (
+            <div
+              style={style}
+              ref={ref}
+              className={classNames(styles.popper, { [styles.top]: placement === 'top-end' })}
+            >
+              {children}
+            </div>
+          )}
+        </Popper>
+      )}
+    </Manager>
+  );
+};
+
+export { MenuButton };

src/components/menu/MenuButton/styles.module.scss

@@ -0,0 +1,40 @@
+.menu {
+  position: relative;
+  cursor: pointer;
+}
+
+@import "src/styles/variables.scss";
+
+@keyframes appear {
+  0% { opacity: 0 }
+  100% { opacity: 1 }
+}
+
+.popper {
+  @include outer_shadow;
+
+  background-color: $menu_bg;
+  box-sizing: border-box;
+  z-index: 12;
+  border-radius: $radius;
+  animation: appear forwards 250ms;
+
+  &::after {
+    content: ' ';
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 10px 10px 10px;
+    border-color: transparent transparent lighten($menu_bg, 6%) transparent;
+    position: absolute;
+    top: -11px;
+    right: 10px;
+  }
+
+  &.top::after {
+    border-width: 10px 10px 0 10px;
+    border-color: darken($menu_bg, 8%) transparent transparent transparent;
+    top: auto;
+    bottom: -11px;
+  }
+}