0
201
VistasCreate components from sidebar Material UI that appear above all components
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.
I tried to figure out the code but get something like this image below.
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).
1 Respuestas
Responde la pregunta0
Finally, I found the answer by myself.
For you who are wondering the solution, here are the general steps I used:
- To solve the position of the orang boxes, replace
Drawercomponent withContainercomponent inSidebarcomponent. - To show the orange boxes only when the
Sidebaris closed/minimized, addhoveredParentstate, set the state to true when the mouse is entering the parent item (usingonMouseEnterprop) and null when the mouse is leaving the parent item. - Show the parent or children items inside the orange boxes.
- Fixed the styling of the orange boxes.
Here is the solution https://codesandbox.io/s/custom-sidebar-material-ui-forked-c47yk