Fixed overlay

MAKCKACHKA · Jan 2, 2024 · 4b21c4a · 4b21c4a
1 parent 4a5c80d
commit 4b21c4a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/src/components/Header/Header.styled.jsx b/src/components/Header/Header.styled.jsx
@@ -282,7 +282,5 @@ export const OverlayContainer = styled.div`
   left: 0;
   width: 100%;
   height: 100%;
-  /* background: rgba(0, 0, 0, 0.5); */
-  display: ${(props) => (props.visible ? 'block' : 'none')};
   z-index: 1;
 `;
diff --git a/src/components/Header/HeaderVariables/HeaderAuth.jsx b/src/components/Header/HeaderVariables/HeaderAuth.jsx
@@ -45,6 +45,17 @@ export const HeaderAuth = () => {
   const [modalIsOpen, setIsOpen] = useState(false);
 
   const [overlay, setOverlay] = useState(false);
+  const [linked, setLinked] = useState(false);
+
+  useEffect(() => {
+    if (modalIsOpen) {
+      setIsOpen(true);
+      setOverlay(false);
+    }
+    if (linked) {
+      setOverlay(false);
+    }
+  }, [modalIsOpen, overlay, linked]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -65,6 +76,7 @@ export const HeaderAuth = () => {
         setWeightModal(false);
         setUserModal(false);
         setMenuModal(false);
+        setOverlay(false);
       }
     };
     window.addEventListener('keydown', handleKeyPress);
@@ -112,18 +124,17 @@ export const HeaderAuth = () => {
 
   return (
     <HeaderContainer2>
-      <LogOutModal modalIsOpen={modalIsOpen} setIsOpen={setIsOpen} />
       <OverlayContainer
-        visible={overlay}
+        style={overlay ? { display: 'block' } : { display: 'none' }}
         onClick={() => {
           setOverlay(false);
           setGoalModal(false);
           setWeightModal(false);
           setUserModal(false);
           setMenuModal(false);
-          setIsOpen(false);
         }}
       />
+      <LogOutModal modalIsOpen={modalIsOpen} setIsOpen={setIsOpen} />
 
       <MobileLogoBtnWrap>
         <LogoLink to="/main">HealthyHub</LogoLink>
@@ -193,6 +204,7 @@ export const HeaderAuth = () => {
             </InfoContainer>
             {goalModal && (
               <GoalModal
+                setMenuModal={setMenuModal}
                 setGoalModal={setGoalModal}
                 run={run}
                 maintain={maintain}
@@ -204,6 +216,7 @@ export const HeaderAuth = () => {
             )}
             {weightModal && (
               <WeightModal
+                setMenuModal={setMenuModal}
                 setWeightModal={setWeightModal}
                 initialValues={initialValuesW}
                 setWeightValue={setWeightValue}
@@ -236,7 +249,7 @@ export const HeaderAuth = () => {
               <use href={`${icons}#icon-arrow-down`} />
             </DropIcon>
             {userModal && (
-              <UserModal setIsOpen={setIsOpen} setOverlay={setOverlay} />
+              <UserModal setIsOpen={setIsOpen} setLinked={setLinked} />
             )}
           </AvatarContainer>
           {menuModal && (

diff --git a/src/components/Header/Modals/UserModal.jsx b/src/components/Header/Modals/UserModal.jsx
@@ -2,10 +2,18 @@ import icons from '../../../assets/icons.svg';
 
 import { UserModalBody, ModalLink, ModalButton } from './ModalStyles';
 
-export const UserModal = ({ setIsOpen, setOverlay }) => {
+export const UserModal = ({ setIsOpen, setLinked }) => {
   return (
     <UserModalBody>
-      <ModalLink to="/settings">
+      <ModalLink
+        to="/settings"
+        onClick={() => {
+          setLinked(true);
+          setTimeout(() => {
+            setLinked(false);
+          }, 1);
+        }}
+      >
         <svg>
           <use href={`${icons}#icon-setting-2`} />
         </svg>
@@ -14,7 +22,6 @@ export const UserModal = ({ setIsOpen, setOverlay }) => {
       <ModalButton
         onClick={() => {
           setIsOpen(true);
-          setOverlay(false);
         }}
       >
         <svg>