How to place the popup based on the position of another div element using javascript and react?

user_13596696 0
Viewed 499

i want to place a popup based on the position of leftnav element. basically place this popup next to the lefnav element such that it is vertically center to leftnav element.

below is the picture of how the popup should be placed

enter image description here

below is my code,

function LeftNav() {
    return (
        <Wrapper id="left_nav">
        </Wrapper>
    );
}

const Wrapper = styled.div`
    position: absolute;
    top: 50%;
    right: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
`;



function PopUp() {
    const left_nav_el = document.getElementById('left_nav');
    return (
        <PopupWrapper />
    );
}

const PopupWrapper = styled.div`
    width: 400px;
    position: relative;
    display: none;
`;

i am not sure how to get the top-left corner of the leftnav and use it as coordinates to place the popup in center and 16px away to the leftnav. could someone help me with this. thanks.

reactjs javascript
1 Answers
const App = () => {
function LeftNav() {
    return (
      <div
        style={{
        height: "50px",
        background: "black",
        width: "50px"
         }}
    id="left_nav"
  />
);
}

 function PopUp() {
    return (
      <div
       style={{
         marginRight: "16px",
         height: "100px",
         background: "green",
         width: "50px"
        }}
       className="popup"
    />
   );
  }
  return (
    <div
      style={{ width: "100px", display: "flex", alignItems: "center"}}
        className="App"
      >
     <LeftNav />
     <PopUp />
     </div>
    );
  }
user_125162350
Related