upd

client/src/components/Menu.tsx

@@ -6,32 +6,39 @@ import ParamsIcon from "./icons/ParamsIcon";
 import WorkIcon from "./icons/WorkIcon";
 import ExitIcon from "./icons/ExitIcon";
 import useAuthStore from "../stores/useAuthStore";
+import { useClickAway } from "@uidotdev/usehooks";
 
 function Menu() {
   const [isShow, setIsShow] = useState<boolean>(false);
-
   const { user, setAccessToken } = useAuthStore();
+  const ref = useClickAway<HTMLDivElement>(() => {
+    setIsShow(false);
+  });
 
   function logout() {
     setAccessToken(null);
   }
 
   return (
-    <div className="">
-      <button
-        onClick={() => setIsShow((prev) => !prev)}
-        className={`p-3 transition-colors relative z-20 ${
-          isShow ? "bg-[#49A1F5] text-white" : "hover:bg-neutral-200"
-        }`}
-      >
-        <BurgerIcon />
-      </button>
+    <div>
+      <span className="relative cursor-pointer z-20">
+        <button
+          onClick={() => setIsShow(true)}
+          className={`p-3 transition-colors relative z-20 ${
+            isShow
+              ? "bg-[#49A1F5] text-white pointer-events-none"
+              : "hover:bg-neutral-200"
+          }`}
+        >
+          <BurgerIcon />
+        </button>
+      </span>
 
       <Transition in={isShow} timeout={150} mountOnEnter unmountOnExit>
         {(state) => (
           <div className={`transition-opacity ${state}`}>
             <div className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-10 z-10"></div>
-            <div className="absolute z-20 ml-2 mt-3.5">
+            <div ref={ref} className="absolute z-20 ml-2 mt-3.5">
               <div className="relative">
                 <svg
                   width="12"
@@ -49,7 +56,9 @@ function Menu() {
                 <div className="relative w-[240px] bg-white rounded-lg shadow">
                   <div className="border-b border-[#DAE0E5] p-6 flex flex-col items-center justify-center gap-4">
                     <div className="rounded-full bg-[#E6ECF2] w-[88px] h-[88px] flex justify-center items-center">
-                      <p className="text-2xl font-semibold ml-0.5 mt-0.5">{user?.name[0]}</p>
+                      <p className="text-2xl font-semibold ml-0.5 mt-0.5">
+                        {user?.name[0]}
+                      </p>
                     </div>
                     <div className="space-y-1 text-center">
                       <p className="text-sm">{user?.name}</p>