Create components from sidebar Material UI that appear above all components

user_8339172 0
Viewed 185

I'm creating a sidebar component using Material UI Drawer component.

I want to create components from the sidebar that sticks side by side to the sidebar component like this green box in the image below.

enter image description here

I tried to figure out the code but get something like this image below.

enter image description here

As we can see the sidebar component looks like it's located below the content page (that's why the orange boxes are cropped). Also, the sidebar component displays the horizontal scroll bar.

Here is the code: https://codesandbox.io/s/custom-sidebar-material-ui-4c05j

In this case, what I want is to create orange boxes that appear above all components (look like the first image above).

material-ui reactjs css javascript
1 Answers

Finally, I found the answer by myself.

For you who are wondering the solution, here are the general steps I used:

  1. To solve the position of the orang boxes, replace Drawer component with Container component in Sidebar component.
  2. To show the orange boxes only when the Sidebar is closed/minimized, add hoveredParent state, set the state to true when the mouse is entering the parent item (using onMouseEnter prop) and null when the mouse is leaving the parent item.
  3. Show the parent or children items inside the orange boxes.
  4. Fixed the styling of the orange boxes.

Here is the solution https://codesandbox.io/s/custom-sidebar-material-ui-forked-c47yk

user_83391720
Related