working comment menu

src/components/node/CommentContent/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo, memo, createElement, useCallback } from 'react';
+import React, { FC, useMemo, memo, createElement, useCallback, useState } from 'react';
 import { IComment, IFile } from '~/redux/types';
 import path from 'ramda/es/path';
 import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';

src/components/node/CommentMenu/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState, useCallback } from 'react';
 import styles from './styles.scss';
 
 interface IProps {
@@ -7,12 +7,25 @@ interface IProps {
 }
 
 const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => {
+  const [is_menu_opened, setIsMenuOpened] = useState(false);
+
+  const onFocus = useCallback(() => setIsMenuOpened(true), [setIsMenuOpened]);
+  const onBlur = useCallback(() => setIsMenuOpened(false), [setIsMenuOpened]);
+
   return (
-    <div className={styles.wrap}>
-      <div className={styles.menu}>
-        <div className={styles.item}>Редактировать</div>
-        <div className={styles.item}>Удалить</div>
-      </div>
+    <div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}>
+      <div className={styles.dot} />
+
+      {is_menu_opened && (
+        <div className={styles.menu}>
+          <div className={styles.item} onMouseDown={onEdit}>
+            Редактировать
+          </div>
+          <div className={styles.item} onMouseDown={onDelete}>
+            Удалить
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/components/node/CommentMenu/styles.scss

@@ -5,23 +5,25 @@
   width: 48px;
   height: 48px;
   z-index: 3;
+  outline: none;
+  cursor: pointer;
 
   &:hover {
-    .menu {
-      display: flex;
+    .dot {
+      background: $secondary;
     }
   }
+}
 
-  &::before {
-    content: ' ';
-    width: 10px;
-    height: 10px;
-    border-radius: 100%;
-    background: transparentize(black, 0.7);
-    position: absolute;
-    right: 5px;
-    top: 5px;
-  }
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  background: transparentize(black, 0.7);
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  transition: background 0.25s;
 }
 
 @keyframes appear {
@@ -35,9 +37,9 @@
 
 .menu {
   position: absolute;
-  right: 0;
-  top: 0;
-  display: none;
+  right: 5px;
+  top: 5px;
+  display: flex;
   flex-direction: column;
   z-index: 6;