fix(themodal.jsx): use createPortal to ensure modal is always top

fixes #20
LikeLionHGU · Aug 5, 2024 · c8c6b22 · c8c6b22
1 parent ae5266b
commit c8c6b22
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -63,7 +63,13 @@ function Header({ loggedIn = false, ...props }) {
         </HeaderMenus>
       </HeaderCompContent>
 
-      <TheModal openModal={openModal} setOpenModal={setOpenModal}>
+      <TheModal
+        openModal={openModal}
+        setOpenModal={setOpenModal}
+        style={{
+          color: "white",
+        }}
+      >
         <HeaderModalLoginText.logo>
           <img src={headerLogo} />
         </HeaderModalLoginText.logo>

diff --git a/src/components/TheModal.jsx b/src/components/TheModal.jsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
 import styled from "styled-components";
 
 function TheModal({
@@ -8,7 +9,7 @@ function TheModal({
   style,
   backdropStyle,
 }) {
-  return (
+  return ReactDOM.createPortal(
     <HeaderModal className={openModal}>
       <HeaderModalBackdrop
         className={openModal}
@@ -18,7 +19,8 @@ function TheModal({
       <HeaderModalContent className={openModal} style={style}>
         {ModalContent}
       </HeaderModalContent>
-    </HeaderModal>
+    </HeaderModal>,
+    document.body
   );
 }