material ui, layout component for desktop to mobile responsive transition

Question

I am writing a Single Web App with material ui, that needs to be responsive, but I do not know which is the control where I must allocate the mains component, if it is a grid or a box.

The next image show the main components arrangement in md,lg,xl

The next image show the main components arrangement in sm,xs when width < 960

In the web I found many complex and very difficult to understand layouts, but not find a basic example. Some like "material ui responsive for dummies".

The mobile version, will have a breakpage between the Appbar and Sidenav, both will occupy the full height, and the Map in the second page will fill the screen.

Answer 1

Thanks to both, it solved the main part o what i need.

Also need to implement a change of page. I forget to mention that the map will be React-Leaflet, so need to implement a flap button over the map for the mobile version.

The button is for scroll to up, because any finger movement in the map area only will affect the map content. Do not will have effect in the scroll.

Another thing to implement is the break page concept:

The behaviour of the break page is like when you see a pdf in presentation mode and press the keyboard button Repag - Avpag, it change all the content and never see the half top and the half down.

Grettings

Answer 2

Show my codesandbox answering your problem : https://codesandbox.io/s/amazing-sound-1nj87 It display your layout for md lg xl correctly. For xs and sm screens, sidenav & map take full height with a break page between sidenav and appBar

Answer 3

I did it for you with MU Grids and media queries, if you have questions, ask. I am always ready to help. This is codesandbox link. Let me know if it help you. https://codesandbox.io/s/charming-shirley-oq6l5