ReactJS: Collapsible sidebar overlaying on another component

user_8826642 0
Viewed 772

I want to add a collapsible sidebar table component which is rendered as an overlay over another component.

The below image is a container of 3 divisions each with a separate component.

<Container>
  <ThumbnailContainer/>
  <ImageContainer/>
  <FieldContainer/>
<Container/>

//////////////////////////////////////////////////////////////////////////////////
<ThumbnailContainer/>        <ImageContainer/>                <FieldContainer/>
         |                         |                                   |
         v                         v                                   v

before

What I want to do is expand a sidebar with a table when the button Line Items is clicked from the FieldContainer. This sidebar must be an overlay displayed over the ImageContainer at the same height(from top) as the trigger button Line Items.

after

I've tried using Accordion(React Bootstrap), Overlay(React Bootstrap), and Drawer(Material UI) none of them worked as expected. What component can I use.

Thanks in Advance!

Any help or tips will be helpful!

reactjs css html javascript
1 Answers

I assume that:

<FieldContainer>
  <LineItemsContainer>
    <ToggleButton>Line Items</ToggleButton>
    <CollapsibleTable />
  </LineItemsContainer>

  {/* Other elements */
</FieldContainer>

The styling will be

FieldContainer {
  overflow: visible;
}
LineItemsContainer {
  overflow: visible;
  position: relative;
}

CollapsibleTable {
  position: absolute;
  top: 50%;
  left: 0;
  width: 800px; // Dont need to set width for this element
  transform: translate(-100%, -50%);
}

I don't have your code to test, but hope it can help you to resolve to issue.

user_60092520
Related