fix: allow open settings by click

thewh1teagle · Apr 30, 2024 · 9af21f6 · 9af21f6
1 parent 5857723
commit 9af21f6
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/desktop/src/components/AppMenu.tsx b/desktop/src/components/AppMenu.tsx
@@ -1,5 +1,7 @@
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { cx } from "../lib/utils";
 
 interface AppMenuProps {
     availableUpdate: boolean;
@@ -9,30 +11,37 @@ interface AppMenuProps {
 export default function AppMenu({ availableUpdate, updateApp }: AppMenuProps) {
     const navigate = useNavigate();
     const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+
     return (
-        <div className="dropdown dropdown-hover absolute left-0 top-0" dir="ltr">
-            <div>
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth="1.5"
-                    stroke="currentColor"
-                    className="w-6 h-6 cursor-pointer">
-                    <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
-                    />
+        <div
+            onMouseEnter={() => {
+                if (!open) {
+                    setOpen(true);
+                }
+            }}
+            onMouseLeave={() => {
+                if (open) {
+                    setOpen(false);
+                }
+            }}
+            onClick={() => setOpen(!open)}
+            className={cx("dropdown absolute left-0 top-0", open && "dropdown-open")}
+            dir="ltr">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6 cursor-pointer">
+                <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z"
+                />
+            </svg>
+            {availableUpdate && (
+                <svg className="w-2 h-2 absolute -top-0.5 left-3" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="7" cy="7" r="7" fill="#518CFF" />
                 </svg>
-                {availableUpdate && (
-                    <svg className="w-2 h-2 absolute -top-0.5 left-3" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="7" cy="7" r="7" fill="#518CFF" />
-                    </svg>
-                )}
-            </div>
+            )}
 
-            <div tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
+            <div tabIndex={0} className="dropdown-content z-[1] menu p-2 shadow bg-base-300 rounded-box w-52">
                 <li onClick={() => navigate("/settings")}>
                     <a>{t("settings")}</a>
                 </li>