feat: use hover to open dropdown-menu

src/components/header/menu.tsx

@@ -1,8 +1,8 @@
 import { Homepage } from "@shared/consts"
 import clsx from "clsx"
 import { motion } from "framer-motion"
-import { useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
-import { useClickAway } from "react-use"
+import { useHoverDirty } from "react-use"
 import { useDark } from "~/hooks/useDark"
 import { useLogin } from "~/hooks/useLogin"
 
@@ -21,13 +21,14 @@ function ThemeToggle() {
 export function Menu() {
   const { loggedIn, login, logout, enabledLogin, userInfo } = useLogin()
   const [shown, show] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef<HTMLElement>(null)
-  useClickAway(ref, () => {
+  const isHover = useHoverDirty(ref)
-    show(false)
+  useEffect(() => {
-  })
+    show(isHover)
+  }, [shown, isHover])
   return (
     <span ref={ref} className="relative">
-      <span className="flex items-center scale-90" onClick={() => show(!shown)}>
+      <span className="flex items-center scale-90">
         {
           enabledLogin && loggedIn && userInfo.avatar
             ? (
@@ -46,10 +47,11 @@ export function Menu() {
         }
       </span>
       {shown && (
+        <div className="absolute right-0 z-99 bg-transparent pt-8 top-0">
           <motion.div
             id="dropdown-menu"
             className={clsx([
-            "absolute top-2rem right-0 z-99 w-200px",
+              "w-200px",
               "bg-primary p-1px backdrop-blur-5 bg-op-70! rounded-lg",
             ])}
             initial={{
@@ -79,6 +81,7 @@ export function Menu() {
               </li>
             </ol>
           </motion.div>
+        </div>
       )}
     </span>
   )