From 4f5827f800b801650c1c017d2052c6a1d538821a Mon Sep 17 00:00:00 2001
From: SaydAliUsmanov <usmanov.guno@mail.ru>
Date: Sat, 28 Jan 2023 21:33:50 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=B1=D0=B0=D0=B3=20=D1=81=D0=BE=20=D1=81=D1=82=D1=80?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=BA=D0=BE=D0=B9=20=D0=B2=20=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/header/Header.jsx | 29 +++++++++----------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/components/layout/header/Header.jsx b/src/components/layout/header/Header.jsx
index 3d709e4..c023719 100644
--- a/src/components/layout/header/Header.jsx
+++ b/src/components/layout/header/Header.jsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 import { Button, Popover } from 'antd';
@@ -68,8 +68,6 @@ export const Header = () => {
 
   const [openMenuProfile, setOpenMenuProfile] = useState(false);
 
-  const ref = useRef();
-
   // todo: зачем это нужно?
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
 
@@ -96,22 +94,10 @@ export const Header = () => {
       document.body.style.overflowY = 'visible';
     }
   };
-  const handleOpenMenuProfile = () => {
-    setOpenMenuProfile(!openMenuProfile);
+  const handleOpenMenuProfile = (isOpen) => {
+    setOpenMenuProfile(isOpen);
   };
 
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (openMenuProfile && !event.path.includes(ref.current)) {
-        setOpenMenuProfile(!openMenuProfile);
-      }
-    };
-    document.body.addEventListener('click', handleClickOutside);
-    return () => {
-      document.body.removeEventListener('click', handleClickOutside);
-    };
-  }, [setOpenMenuProfile, openMenuProfile]);
-
   // todo: рефакторить
   const iconMenuAndClose = !mobileMenu ? <MenuIcon /> : <CloseMenuIcon />;
 
@@ -153,8 +139,13 @@ export const Header = () => {
             </div>
             {token ? (
               <div>
-                <Popover placement="bottomRight" trigger="click" content={PopoverContent}>
-                  <StyledAvatar onClick={handleOpenMenuProfile} ref={ref} className="d-md-flex">
+                <Popover
+                  onOpenChange={handleOpenMenuProfile}
+                  placement="bottomRight"
+                  trigger="click"
+                  content={PopoverContent}
+                >
+                  <StyledAvatar className="d-md-flex">
                     <img className="m-auto" src={profile.avatar?.thumbnail} alt="" />
                     <div className={openMenuProfile ? 'downArrow' : 'upArrow'}>
                       <ArrowAvatar />