added notes menu

src/components/common/CornerMenu/index.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback, useState, VFC } from 'react';
+
+import styles from '~/components/comment/CommentMenu/styles.module.scss';
+import { MenuDots } from '~/components/common/MenuDots';
+
+interface MenuAction {
+  title: string;
+  action: () => void;
+}
+interface CornerMenuProps {
+  actions: MenuAction[];
+}
+
+const CornerMenu: VFC<CornerMenuProps> = ({ actions }) => {
+  const [is_menu_opened, setIsMenuOpened] = useState(false);
+
+  const onFocus = useCallback(() => setIsMenuOpened(true), [setIsMenuOpened]);
+  const onBlur = useCallback(() => setIsMenuOpened(false), [setIsMenuOpened]);
+
+  return (
+    <div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}>
+      <MenuDots onClick={onFocus} />
+
+      {is_menu_opened && (
+        <div className={styles.menu}>
+          {actions.map(({ title, action }) => (
+            <div className={styles.item} onMouseDown={action} key={title}>
+              {title}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export { CornerMenu };

src/components/common/CornerMenu/styles.module.scss

@@ -0,0 +1,62 @@
+@import "src/styles/variables";
+
+.wrap {
+  position: absolute;
+  right: -3px;
+  top: -3px;
+  width: 48px;
+  height: 48px;
+  z-index: 10;
+  outline: none;
+  cursor: pointer;
+
+  &:hover {
+    .dot {
+      background: $secondary;
+    }
+  }
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.menu {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+  display: flex;
+  flex-direction: column;
+  z-index: 6;
+  white-space: nowrap;
+
+  animation: appear 0.25s forwards;
+}
+
+.item {
+  user-select: none;
+  font: $font_12_semibold;
+  text-transform: uppercase;
+  padding: 8px $gap;
+  background: $content_bg;
+  cursor: pointer;
+
+  &:first-child {
+    border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
+  }
+
+  &:last-child {
+    border-bottom-left-radius: $radius;
+    border-bottom-right-radius: $radius;
+  }
+
+  &:hover {
+    background: $primary;
+  }
+}