Make context menu

src/client/package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@microsoft/signalr": "^6.0.0",
+    "@tippyjs/react": "^4.2.6",
     "next": "12.0.3",
     "next-pwa": "^5.4.0",
     "react": "17.0.2",

src/client/src/components/todos/todoItem.tsx

@@ -1,6 +1,7 @@
 import { Todo } from "@src/core/entities/todo";
 import { FC, useState } from "react";
 import { TodoCheckmark } from "@src/components/todos/todoCheckmark";
+import Tippy from "@tippyjs/react";
 
 interface TodoItemProps {
   todo: Todo;
@@ -10,6 +11,7 @@ interface TodoItemProps {
 
 export const TodoItem: FC<TodoItemProps> = (props) => {
   const [isHovering, setIsHovering] = useState(false);
+  const [menuIsOpen, setMenuIsOpen] = useState(false);
 
   return (
     <div
@@ -31,18 +33,38 @@ export const TodoItem: FC<TodoItemProps> = (props) => {
           </div>
         </div>
       </div>
+      <Tippy
+        placement="left"
+        visible={menuIsOpen}
+        onClickOutside={() => {
+          setMenuIsOpen(false);
+        }}
+        interactive={true}
+        interactiveBorder={20}
+        content={
+          <div
+            className="p-4 bg-gray-700 border border-accent-500 rounded-xl flex flex-col gap-4"
+            tabIndex={0}
+          >
+            <button className="hover:bg-accent-500">Delete</button>
+            <button>Edit</button>
+          </div>
+        }
+      >
         <div
           className={`absolute left-full top-1/2 w-4 h-4  box-content ml-2 p-2 rounded-md hover:bg-gray-300 active:bg-gray-400 transition group`}
           style={{ transform: "translate(0px, -50%)" }}
+          onClick={() => setMenuIsOpen(true)}
         >
           {isHovering && (
-          <div className="flex flex-col justify-between h-full ">
+            <div className="flex flex-col justify-between h-full">
               <div className="h-0.5 bg-gray-300 rounded-full group-hover:bg-gray-700" />
               <div className="h-0.5 bg-gray-300 rounded-full group-hover:bg-gray-700" />
               <div className="h-0.5 bg-gray-300 rounded-full group-hover:bg-gray-700" />
             </div>
           )}
         </div>
+      </Tippy>
     </div>
   );
 };

src/client/yarn.lock

@@ -1102,6 +1102,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.9.0":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.2.tgz#0798c03351f0dea1a5a4cabddf26a55a7cbee590"
+  integrity sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz#9cb1c5146ddd6a4968ad96f209c50c62f92f9879"
@@ -1152,6 +1157,13 @@
     ejs "^2.6.1"
     magic-string "^0.25.0"
 
+"@tippyjs/react@^4.2.6":
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
+  integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
+  dependencies:
+    tippy.js "^6.3.1"
+
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
@@ -5257,6 +5269,13 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tippy.js@^6.3.1:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
+  dependencies:
+    "@popperjs/core" "^2.9.0"
+
 tmp@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"