Fixed the profile menu

sublinks · Dec 17, 2023 · 83679e6 · 83679e6
1 parent b6f0ca9
commit 83679e6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/src/components/profile-menu/index.tsx b/src/components/profile-menu/index.tsx
@@ -4,16 +4,20 @@ import {
   Button,
   Menu, MenuHandler, MenuList
 } from '@material-tailwind/react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { UserCircleIcon } from '@heroicons/react/24/outline';
 import { useTheme } from '@/utils/theme';
 import Link from 'next/link';
+import { useClickOutside } from '@/utils/clickAway';
 import Icon, { ICON_SIZE } from '../icon';
 import ThemeSwitch from '../theme-switch';
 import { LinkText } from '../text';
 
 const ProfileMenu = () => {
   const [theme, setTheme] = useTheme();
+  const [open, setOpen] = useState<boolean>(false);
+
+  const ref = useClickOutside<HTMLUListElement>(() => open && setOpen(false));
 
   useEffect(() => {
     document.documentElement.classList.remove('dark');
@@ -27,13 +31,13 @@ const ProfileMenu = () => {
   }[] = [
     {
       item:
-      (
-        <Link href="/user/todo" className="justify-center flex">
-          <LinkText className="text-center w-full">
-            Profile
-          </LinkText>
-        </Link>
-      )
+          (
+            <Link href="/user/todo" className="justify-center flex">
+              <LinkText className="text-center w-full">
+                Profile
+              </LinkText>
+            </Link>
+          )
     },
     {
       item: <ThemeSwitch key="theme-switcher" mode={theme as 'dark' | 'light'} onSwitch={setTheme} />
@@ -44,13 +48,18 @@ const ProfileMenu = () => {
     <div className="flex justify-center items-center">
       <Menu
         placement="bottom"
+        open={open}
+        handler={setOpen}
       >
         <MenuHandler>
-          <Button aria-label="ProfileButton" className="bg-transparent">
+          <Button
+            aria-label="ProfileButton"
+            className="bg-transparent"
+          >
             <Icon IconType={UserCircleIcon} size={ICON_SIZE.MEDIUM} title="User icon" isInteractable />
           </Button>
         </MenuHandler>
-        <MenuList className="w-full relative md:w-80 flex flex-col bg-primary dark:bg-primary-dark dark:border-gray-800 rounded-b-none rounded-t-md md:rounded-b-md md:rounded-t-none" aria-label="ProfileMenu">
+        <MenuList ref={ref} className="w-full relative md:w-80 flex flex-col bg-primary dark:bg-primary-dark dark:border-gray-800 rounded-b-none rounded-t-md md:rounded-b-md md:rounded-t-none" aria-label="ProfileMenu">
           {items.map(({ item }) => (
             <div className="w-full mt-0 top-0 pt-0 bg-none border-t first:border-t-0 border-gray-500 z-50" key={item.key}>
               {item}

diff --git a/src/utils/clickAway.ts b/src/utils/clickAway.ts
@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+export function useClickOutside<T extends HTMLElement>(callback: () => void) {
+  const ref = useRef<T | null>(null);
+
+  useEffect(() => {
+    function handleClick(event: MouseEvent) {
+      const el = ref?.current;
+      // Do nothing if clicking ref's element or descendent elements
+      if (!el || el.contains(event.target as Node)) {
+        return;
+      }
+
+      callback();
+    }
+
+    window?.addEventListener('mousedown', handleClick, { capture: true });
+    return () => {
+      window?.removeEventListener('mousedown', handleClick, { capture: true });
+    };
+  }, [callback, ref]);
+
+  return ref;
+}