App Layout component

[murbanowicz]

Expected Behavior 🤔

It should provide a configurable layout out of the box without so much additional coding required.
This is a really basic feature and e.g. Ant Design does it great and so simple.

Current Behavior 😯

Any layout has to be done with a lot of coding to handle RWD, different drawer variants etc.

Examples 🌈

Origen Studio Layout component which is using Material UI!: https://github.com/OrigenStudio/material-ui-layout.

Quasar Framework Layout (VueJS). Such a great implementation for VueJS. Easy, flexible, and reliable.
https://v1.quasar-framework.org/layout/layout

and also to show how simple it can/should be Ant Design Layout: https://ant.design/components/layout/

Context 🔦

It is time-consuming to set up the layout with Material UI and everyone has to do it on his/her own instead of the job being done once in the MUI repo and being reused across all projects.

Benchmark

• https://www.tremor.so/blocks/page-shells
• https://quasar.dev/layout/layout
• https://vuetifyjs.com/en/getting-started/wireframes/
• https://ant.design/components/layout/
• https://tailwindui.com/components/application-ui/application-shells/stacked
• https://ui.shadcn.com/blocks
• Jun Layout https://github.com/siriwatknp/mui-treasury/tree/8238811dad4eb6d0ff5275c76b6957d9bae43c6d/packages/mui-layout
• https://panjiachen.github.io/vue-element-admin/#/nested/menu1/menu1-1 (nested routes)

Advanced layout components: mui/toolpad#3280

[oliviertassinari]

@murbanowicz Are you interested in a specific layout "output"?

[murbanowicz]

@oliviertassinari great! Is there anything in LAB already? I don't see anything yet.

The best output would be something similar to Quasar Framework. Crazy easy to use and so ... flexible! Few props and you have 100% responsive, customized layout but AntD approach is also not that bad.

Do you have any time target for this? I have started working with MUI and so much effort required to put layout together put me on hold 😢

[mbrookes]

Is there anything in LAB already? I don't see anything yet.

^^ "It's work in progress: #14499."

so much effort required to put layout together put me on hold

Depending on what sort of layout you're after, you could try the dashboard page layout example: https://material-ui.com/getting-started/templates/

[jgoux]

And if you're interested for the state part only of the Layout, you could also provide a hook in the same spirit as https://github.com/techniq/mui-app-container 👌

[stunaz]

What is the difference between Box , Grid and now Container ?

[oliviertassinari]

@stunaz Good question

• The Container component is intended to be used as the main layout component. It sets minimum padding on the right and the left side, so your content doesn't touch the edges. At the same time, it horizontal centers your content when the screen is too wide. For instance, a small container width improves readability. https://material-ui.com/components/container/.
• The Grid component handles the layout positioning within a Container. It's a slim abstraction on top of the CSS flexbox model. It has two interesting features: the items spacing and responsive column handling. https://material-ui.com/components/grid/
• The Box component is a style toolbox, it's an abstraction for people who like the tailwinds approach. Instead of writing custom CSS, you can use the Box style props. https://material-ui.com/components/box/

You might be confused by <Container /> vs <Grid container />. But make no mistakes, you can't use the two interchangeably. a Grid container, abstracts a flex container. A Container abstracts a page top-level element.

What's the difference between Grid and Box? You should be able to replace the Grid usage with the Box. However, the Box is a direct mapping to CSS properties, while the Grid tries to be smarter, with a more abstracted API. The Grid should be the default go-to solution. Only consider the Box or custom CSS if it's not the case.

[siriwatknp]

Another option for layout component. works with material-ui v4 and v5

• For v4 https://mui-treasury.com/layout/
• For v5 (not ready yet) https://siriwatknp.github.io/mui-treasury/?path=/story/layout-introduction--page

[oliviertassinari]

@siriwatknp I have updated the ## Benchmark section with your link.

So far, It seems that the layout is the kind of problem that we have solved with the Templates section and the premium templates. I suspect we could further solve the problem with a Material-UI Blocks project (copy & paste of the source).

The challenges with this layout pain:

• Developers usually need a layout once per project. They don't frequently come back to it.
• The layout is often very custom. Exposing an abstracted API (e.g. dedicated components) might make it very hard to tweak. I wonder if we can't frame the problem like this:
  • If I'm working on an internal app, I don't care about the details. I want to go fast. I only want it to work. I'm happy with a simple/light abstracted API like Ant Design has.
  • If I'm working on a customer-facing app, I want to have full control of the layout, I want boilerplate just so that I see the DOM nodes/styles in my source, and easily tweak them. I'm happy with a copy of the source approach like TailwindUI has.

Regarding the next step. I suspect the right answer is one of these 3:

1. we don't need to do anything about it
2. we need to add a basic layout component
3. we need to solve it with Material-UI Blocks