shitty toolbar

src/components/control_panel.jsx

@@ -1,35 +1,75 @@
-import React from "react";
+import { React, useState } from "react";
 import menu from "./menu";
-import { IconCaretUp, IconRight } from "@arco-design/web-react/icon";
+import {
+  IconCaretUp,
+  IconCaretDown,
+  IconRight,
+} from "@arco-design/web-react/icon";
 import "@arco-design/web-react/dist/css/arco.css";
 
 export default function ControlPanel() {
+  let cursor = 0;
+  const iota = (restart = false) => {
+    const temp = cursor;
+    cursor++;
+    return temp;
+  };
+
+  const Tool = {
+    TOOLBAR: iota(),
+    ZOOM: iota(),
+    UNDO: iota(),
+    REDO: iota(),
+    ADD: iota(),
+    COUNT: iota(),
+  };
+
+  const [showToolBar, setShowToolBar] = useState(true);
+  const [openZoom, setOpenZoom] = useState(false);
+  const [openAdd, setOpenAdd] = useState(false);
+
+  const invert = (e, tool) => {
+    switch (tool) {
+      case Tool.TOOLBAR:
+        setShowToolBar((prev) => !prev);
+        break;
+      case Tool.ZOOM:
+        setOpenZoom((prev) => !prev);
+        break;
+      case Tool.ADD:
+        setOpenAdd((prev) => !prev);
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <nav className="bg-gray-200 relative">
       <div className="flex justify-between items-center">
         <ul className="flex justify-start text-md ms-3 select-none relative">
           {Object.keys(menu).map((category) => (
             <div key={category}>
-              <div className="peer px-3 py-1 bg-gray-200 hover:bg-gray-300 relative z-10">
+              <div className="peer px-3 py-1 bg-gray-200 hover:bg-gray-300 relative z-50">
                 {category}
               </div>
-              <ul className="hidden peer-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg absolute z-20">
+              <ul className="hidden peer-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg absolute z-50">
                 {Object.keys(menu[category]).map((item, index) => {
                   if (menu[category][item].length > 0) {
                     return (
                       <div
                         key={index}
-                        className="group relative px-5 py-3 hover:bg-gray-200 z-10"
+                        className="group relative px-5 py-3 hover:bg-gray-200 z-50"
                       >
                         <div className="flex justify-between items-center">
                           <li>{item}</li>
                           <IconRight />
                         </div>
-                        <ul className="hidden group-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg absolute z-30 top-0 left-full">
+                        <ul className="hidden group-hover:flex hover:flex w-[200px] flex-col bg-white drop-shadow-lg absolute z-50 top-0 left-full">
                           {menu[category][item].map((e) => (
                             <li
                               key={e}
-                              className="px-5 py-3 hover:bg-gray-200 z-10"
+                              className="px-5 py-3 hover:bg-gray-200 z-50"
                             >
                               {e}
                             </li>
@@ -40,7 +80,7 @@ export default function ControlPanel() {
                   }
                   return (
                     <li
-                      className="px-5 py-3 hover:bg-gray-200 relative z-10"
+                      className="px-5 py-3 hover:bg-gray-200 relative z-50"
                       key={index}
                     >
                       {item}
@@ -51,11 +91,102 @@ export default function ControlPanel() {
             </div>
           ))}
         </ul>
-        <button>
+        <button onClick={(e) => invert(e, Tool.TOOLBAR)} className="me-3">
-          <IconCaretUp />
+          {showToolBar ? <IconCaretUp /> : <IconCaretDown />}
         </button>
       </div>
-      <div className="p-1">tools</div>
+      {showToolBar && (
+        <div className="p-1 flex justify-start items-center">
+          <div className="relative">
+            <button
+              className="ms-2 py-2 px-3 hover:bg-gray-300 relative"
+              onClick={(e) => invert(e, Tool.ZOOM)}
+            >
+              zoom <IconCaretDown />
+            </button>
+            <ul
+              className={`${
+                openZoom ? "" : "hidden"
+              } w-[200px] flex-col drop-shadow-lg bg-white py-1 ms-2 absolute z-20 top-full`}
+            >
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                Fit window
+              </li>
+              <hr />
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">25%</li>
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">50%</li>
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">75%</li>
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                100%
+              </li>
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                125%
+              </li>
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                150%
+              </li>
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                175%
+              </li>
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                200%
+              </li>
+              <hr />
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                Custom
+              </li>
+            </ul>
+          </div>
+          <button className="py-1 px-2 hover:bg-gray-300" title="Zoom in">
+            <i className="fa-solid fa-magnifying-glass-plus"></i>
+          </button>
+          <button className="py-1 px-2 hover:bg-gray-300" title="Zoom out">
+            <i className="fa-solid fa-magnifying-glass-minus"></i>
+          </button>
+          <button className="py-1 px-2 hover:bg-gray-300" title="Undi">
+            <i className="fa-solid fa-rotate-left "></i>
+          </button>
+          <button className="py-1 px-2 hover:bg-gray-300" title="Redo">
+            <i className="fa-solid fa-rotate-right"></i>
+          </button>
+          <button className="py-1 px-2 hover:bg-gray-300" title="Edit">
+            <i className="fa-solid fa-pen-to-square"></i>
+          </button>
+          <div className="relative">
+            <button
+              className="py-1 px-2 hover:bg-gray-300 relative"
+              title="Add"
+              onClick={(e) => invert(e, Tool.ADD)}
+            >
+              <i class="fa-solid fa-plus"></i> <IconCaretDown />
+            </button>
+            <ul
+              className={`${
+                openAdd ? "" : "hidden"
+              } w-[200px] flex-col drop-shadow-lg bg-white py-1 absolute z-20 top-full`}
+            >
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                Table
+              </li>
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                Relationship
+              </li>
+              <li className="px-5 py-3 hover:bg-gray-200 relative z-20">
+                Note
+              </li>
+            </ul>
+          </div>
+          <button className="py-1 px-2 hover:bg-gray-300" title="Delete">
+            <i className="fa-solid fa-trash"></i>
+          </button>
+          <button className="py-1 px-2 hover:bg-gray-300" title="Move">
+            <i className="fa-regular fa-hand"></i>
+          </button>
+          <button className="py-1 px-2 hover:bg-gray-300" title="Commit">
+            <i className="fa-solid fa-code-commit"></i>
+          </button>
+        </div>
+      )}
     </nav>
   );
 }