[core] Make DashboardLayout navigation responsive #3750

apedroferreira · 2024-07-03T09:35:55Z

Make navigation menu open and close with a menu toggle in left side of the header in breakpoints under md.
Also centered logo + title in mobile screens.

DashboardLayout docs: https://deploy-preview-3750--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout

Screen.Recording.2024-07-19.at.14.33.41.mov

…responsive-nav

Janpot · 2024-07-03T10:50:56Z

There are some problems in the docs:

We may want to show off the navigation, even if the content is too small. e.g. like the current behavior
Expanding the navigation behaves erratically

Screen.Recording.2024-07-03.at.12.50.11.mov

apedroferreira · 2024-07-05T13:55:15Z

Added some fixes/improvements and addressed review feedback:

Center logo/title in mobile header relative to the whole header width (instead of in the remaining space after the menu icon)
Add initialNavigationOpen prop to start with mobile navigation open in the docs demos
Use persistent drawer instead of temporary drawer - fixes the issue with unstyled giant icons in docs which I couldn't really find the full cause for yet (maybe some conflict with the docs outside due to the way the temporary drawers are implemented, could be why the Drawer docs example has const container = window !== undefined ? () => window().document.body : undefined;), and this way in some cases even with the mobile drawer open users can interact with the dashboard so that might be an advantage. It seems a bit less performant though as it uses a margin transition (can still look a bit more into this maybe but I guess it's a good solution already).
Updated video in the PR description with this new behavior.

…responsive-nav

bharatkashyap

Looks good! About initialNavigationOpen, I would expect the name of the prop to match more closely with the behaviour of opening the mobile navigation by default.

Perhaps mobileNavigationOpen

Janpot · 2024-07-06T07:27:39Z

docs/translations/api-docs/dashboard-layout/dashboard-layout.json

+  "propDescriptions": {
+    "children": { "description": "The content of the dashboard." },
+    "initialNavigationOpen": {
+      "description": "Whether the mobile navigation drawer should start open."


Should this be external API? Why would users need this?
Besides, can't we, for demo purposes just force the large screen behavior. Maybe change the breakpoints or something. But in a hidden way, users shouldn't copy+paste our hacks accidentally.

It should be internal API if possible, just not sure what the best way to do that is? Will try to find a solution. (edit: I guess we can just mark it as internal but it's still secretly usable?)

Also wasn't sure if it's better to have the mobile or the desktop version on the docs, so I guess we can try to use the desktop one there or change the breakpoints.

…int dynamic

apedroferreira · 2024-07-08T15:06:33Z

Addressed latest review feedback:

isDemoMode internal prop (just simply marked it as internal) that enables a lower breakpoint for mobile view + mobile navigation starts open, for now.

apedroferreira · 2024-07-11T18:19:25Z

Solutions to the recent problems that have been raised:

Added breakpoints to the theme in the docs examples so that the first view usually shown in docs does not have a mobile menu.
Reverted back to a temporary variant of the navigation drawer as shown in the re-updated video example above, as I tried out the dashboard on my phone and this is a much better UX for mobile. This required a fix for the drawer in the docs, because the portal used by it defaults to the document outside the iframes (as reported by Jan in this PR already). Fixed it the same way as the responsive drawer example in https://mui.com/material-ui/react-drawer/#responsive-drawer, through the window prop in the AppProvider component where the iframe window can be set, which we're already using for similar issues with CSS variables theming in these demos.

…responsive-nav

apedroferreira · 2024-07-19T13:59:58Z

This one should be good for a review, the themes in the demos are cleaner now!
Check this comment for the latest changes: #3750 (comment)

Janpot

Let's go!

FabioZan86 · 2024-10-21T01:21:57Z

Dados #3585

Faça o menu de navegação abrir e fechar com um menu toggle no lado esquerdo do cabeçalho em breakpoints sob md. Também centralize o logotipo + título em telas móveis.

Documentação do DashboardLayout : https://deploy-preview-3750--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout

Gravação.de.tela.2024-07-19.at.14.33.41.mov

Hello, very good! Can you make the code available?

apedroferreira · 2024-10-21T17:44:25Z

Dados #3585
Faça o menu de navegação abrir e fechar com um menu toggle no lado esquerdo do cabeçalho em breakpoints sob md. Também centralize o logotipo + título em telas móveis.
Documentação do DashboardLayout : https://deploy-preview-3750--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout
Gravação.de.tela.2024-07-19.at.14.33.41.mov

Hello, very good! Can you make the code available?

Hi, the features in this PR are already live in the latest version of @toolpad/core.
Let us know if you find any issues or anything missing!

FabioZan86 · 2024-10-22T12:40:53Z

Dados #3585
Faça o menu de navegação abrir e fechar com um menu toggle no lado esquerdo do cabeçalho em breakpoints sob md. Também centralize o logotipo + título em telas móveis.
Documentação do DashboardLayout : https://deploy-preview-3750--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout
Gravação.de.tela.2024-07-19.at.14.33.41.mov

Hello, very good! Can you make the code available?

Hi, the features in this PR are already live in the latest version of @toolpad/core. Let us know if you find any issues or anything missing!

Hi...How can I customize the layout with the toolpad/core? Make the vertical bars in the collected style as in the photo?

apedroferreira · 2024-10-22T12:57:16Z

Dados #3585
Faça o menu de navegação abrir e fechar com um menu toggle no lado esquerdo do cabeçalho em breakpoints sob md. Também centralize o logotipo + título em telas móveis.
Documentação do DashboardLayout : https://deploy-preview-3750--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout
Gravação.de.tela.2024-07-19.at.14.33.41.mov

Hello, very good! Can you make the code available?

Hi, the features in this PR are already live in the latest version of @toolpad/core. Let us know if you find any issues or anything missing!

Hi...How can I customize the layout with the toolpad/core? Make the vertical bars in the collected style as in the photo?

So you want to have 2 columns on the left-side?
Right now it would be difficult to make the dashboard layout look exactly like that...
We will create slots that allow you to customize the layout a bit more, including one to override the navigation sidebar with any custom component.

I've created an issue in #4299, hopefully this feature will help!

FabioZan86 · 2024-10-22T15:00:45Z

Dados #3585
Faça o menu de navegação abrir e fechar com um menu toggle no lado esquerdo do cabeçalho em breakpoints sob md. Também centralize o logotipo + título em telas móveis.
Documentação do DashboardLayout : https://deploy-preview-3750--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout
Gravação.de.tela.2024-07-19.at.14.33.41.mov

Hello, very good! Can you make the code available?

Hi, the features in this PR are already live in the latest version of @toolpad/core. Let us know if you find any issues or anything missing!

Hi...How can I customize the layout with the toolpad/core? Make the vertical bars in the collected style as in the photo?

So you want to have 2 columns on the left-side? Right now it would be difficult to make the dashboard layout look exactly like that... We will create slots that allow you to customize the layout a bit more, including one to override the navigation sidebar with any custom component.

I've created an issue in #4299, hopefully this feature will help!

The toolpad doesn't make customizing more dynamic, right? So I can leave it aside and use old components, discarding the toolpad core. I want to create a double drawer...

apedroferreira · 2024-10-22T15:07:20Z

Dados #3585
Faça o menu de navegação abrir e fechar com um menu toggle no lado esquerdo do cabeçalho em breakpoints sob md. Também centralize o logotipo + título em telas móveis.
Documentação do DashboardLayout : https://deploy-preview-3750--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout
Gravação.de.tela.2024-07-19.at.14.33.41.mov

Hello, very good! Can you make the code available?

Hi, the features in this PR are already live in the latest version of @toolpad/core. Let us know if you find any issues or anything missing!

Hi...How can I customize the layout with the toolpad/core? Make the vertical bars in the collected style as in the photo?

So you want to have 2 columns on the left-side? Right now it would be difficult to make the dashboard layout look exactly like that... We will create slots that allow you to customize the layout a bit more, including one to override the navigation sidebar with any custom component.
I've created an issue in #4299, hopefully this feature will help!

The toolpad doesn't make customizing more dynamic, right? So I can leave it aside and use old components, discarding the toolpad core. I want to create a double drawer...

Depending on how specific the layout you want to create is, it might be difficult to adjust Toolpad Core to look exactly like it at the moment...
As we add more customization options it should eventually be possible, but not sure if simply being able to replace the current drawer and header with custom components will be enough for you, as that's one of the next upcoming features.
If it is, you can wait for that feature, otherwise maybe using standard Material UI components will be best for now.

FabioZan86 · 2024-10-22T21:44:10Z

Dados #3585
Faça o menu de navegação abrir e fechar com um menu toggle no lado esquerdo do cabeçalho em breakpoints sob md. Também centralize o logotipo + título em telas móveis.
Documentação do DashboardLayout : https://deploy-preview-3750--mui-toolpad-docs.netlify.app/toolpad/core/react-dashboard-layout
Gravação.de.tela.2024-07-19.at.14.33.41.mov

Hello, very good! Can you make the code available?

Hi, the features in this PR are already live in the latest version of @toolpad/core. Let us know if you find any issues or anything missing!

Hi...How can I customize the layout with the toolpad/core? Make the vertical bars in the collected style as in the photo?

So you want to have 2 columns on the left-side? Right now it would be difficult to make the dashboard layout look exactly like that... We will create slots that allow you to customize the layout a bit more, including one to override the navigation sidebar with any custom component.
I've created an issue in #4299, hopefully this feature will help!

The toolpad doesn't make customizing more dynamic, right? So I can leave it aside and use old components, discarding the toolpad core. I want to create a double drawer...

Depending on how specific the layout you want to create is, it might be difficult to adjust Toolpad Core to look exactly like it at the moment... As we add more customization options it should eventually be possible, but not sure if simply being able to replace the current drawer and header with custom components will be enough for you, as that's one of the next upcoming features. If it is, you can wait for that feature, otherwise maybe using standard Material UI components will be best for now.

I urgently need to make this layout this way, separated by drawers like Instagram and responsive:

apedroferreira · 2024-10-24T17:23:32Z

I urgently need to make this layout this way, separated by drawers like Instagram and responsive:

Will try to make it so you can override the header and drawer with your own custom components, and release it in v0.9.0 of @toolpad/core, but no exact timeframes yet.

I've also created an issue for supporting layouts with two navigation sidebars #4304 but I think it might not be our biggest priority for now.

FabioZan86 · 2024-10-24T20:58:39Z

I urgently need to make this layout this way, separated by drawers like Instagram and responsive:

Will try to make it so you can override the header and drawer with your own custom components, and release it in v0.9.0 of @toolpad/core, but no exact timeframes yet.

I've also created an issue for supporting layouts with two navigation sidebars #4304 but I think it might not be our biggest priority for now.

Thanks! I'm building my screens with the @mui/core components!

Make DashboardLayout navigation responsive

739e913

apedroferreira added feature: Components Button, input, table, etc. enhancement This is not a bug, nor a new feature mobile Targets mobile platform labels Jul 3, 2024

apedroferreira self-assigned this Jul 3, 2024

apedroferreira added 7 commits July 3, 2024 10:40

Simplify

5657f06

Naming adjustments

cb290e4

Merge remote-tracking branch 'upstream/master' into dashboard-layout-…

0ec086f

…responsive-nav

Fix dashboard layout tests

08df769

Better like this

9b6c268

Wording

aaaf110

Set larger viewport dimensions for browser tests

f88ad84

apedroferreira marked this pull request as ready for review July 3, 2024 10:36

apedroferreira requested review from a team and removed request for a team July 3, 2024 10:51

apedroferreira added 2 commits July 5, 2024 14:36

Review improvements/fixes + center logo and title better

00f187f

Set min page content width

5266f4d

Merge remote-tracking branch 'upstream/master' into dashboard-layout-…

4a8563f

…responsive-nav

apedroferreira requested a review from a team July 5, 2024 15:45

bharatkashyap reviewed Jul 5, 2024

View reviewed changes

Janpot reviewed Jul 6, 2024

View reviewed changes

This comment was marked as outdated.

Sign in to view

apedroferreira added 2 commits July 8, 2024 13:58

More review feedback: make demo prop internal and make mobile breakpo…

0f16640

…int dynamic

Merge branch 'master' into dashboard-layout-responsive-nav

ceb8cb7

bharatkashyap mentioned this pull request Aug 17, 2024

[docs-infra] Support full screen / screen-size switcher for demos mui/material-ui#43331

Open

apedroferreira requested review from Janpot and bharatkashyap July 8, 2024 15:07

Make DashboardLayout have a public container prop instead

1b84d85

apedroferreira added 4 commits July 16, 2024 18:44

Fix menu closing in nested items

6efc05d

Revert unwanted playground changes

adf49df

Prettier wasn't working for some reason

3080479

Merge remote-tracking branch 'upstream/master' into dashboard-layout-…

b611de7

…responsive-nav

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 19, 2024

Merge remote-tracking branch 'upstream/master' into dashboard-layout-…

53e33ce

…responsive-nav

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Jul 19, 2024

apedroferreira added 3 commits July 19, 2024 14:18

Just need to fix mobile sidebar color somehow

5ddc2aa

Fix drawer color

056e997

Adjustments

1c1e932

apedroferreira changed the title ~~Make DashboardLayout navigation responsive (Toolpad Core)~~ [core] Make DashboardLayout navigation responsive Jul 19, 2024

Fix colors

1cc6535

Janpot approved these changes Jul 19, 2024

View reviewed changes

apedroferreira merged commit aef3803 into mui:master Jul 19, 2024
14 checks passed

apedroferreira deleted the dashboard-layout-responsive-nav branch July 19, 2024 15:30

oliviertassinari added the component: layout This is the name of the generic UI component, not the React module! label Aug 10, 2024

apedroferreira mentioned this pull request Oct 22, 2024

[DashboardLayout] Provide slots for full customization of layout header and sidebar #4299

Closed

apedroferreira mentioned this pull request Oct 24, 2024

Support multi-level navigation sidebars #4304

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[core] Make DashboardLayout navigation responsive #3750

[core] Make DashboardLayout navigation responsive #3750

apedroferreira commented Jul 3, 2024 •

edited

Loading

Janpot commented Jul 3, 2024

apedroferreira commented Jul 5, 2024 •

edited

Loading

bharatkashyap left a comment

Janpot Jul 6, 2024

apedroferreira Jul 8, 2024 •

edited

Loading

This comment was marked as outdated.

apedroferreira commented Jul 8, 2024

apedroferreira commented Jul 11, 2024 •

edited

Loading

apedroferreira commented Jul 19, 2024

Janpot left a comment

FabioZan86 commented Oct 21, 2024

apedroferreira commented Oct 21, 2024 •

edited

Loading

FabioZan86 commented Oct 22, 2024

apedroferreira commented Oct 22, 2024

FabioZan86 commented Oct 22, 2024

apedroferreira commented Oct 22, 2024

FabioZan86 commented Oct 22, 2024

apedroferreira commented Oct 24, 2024

FabioZan86 commented Oct 24, 2024

[core] Make DashboardLayout navigation responsive #3750

[core] Make DashboardLayout navigation responsive #3750

Conversation

apedroferreira commented Jul 3, 2024 • edited Loading

Janpot commented Jul 3, 2024

apedroferreira commented Jul 5, 2024 • edited Loading

bharatkashyap left a comment

Choose a reason for hiding this comment

Janpot Jul 6, 2024

Choose a reason for hiding this comment

apedroferreira Jul 8, 2024 • edited Loading

Choose a reason for hiding this comment

This comment was marked as outdated.

apedroferreira commented Jul 8, 2024

apedroferreira commented Jul 11, 2024 • edited Loading

apedroferreira commented Jul 19, 2024

Janpot left a comment

Choose a reason for hiding this comment

FabioZan86 commented Oct 21, 2024

apedroferreira commented Oct 21, 2024 • edited Loading

FabioZan86 commented Oct 22, 2024

apedroferreira commented Oct 22, 2024

FabioZan86 commented Oct 22, 2024

apedroferreira commented Oct 22, 2024

FabioZan86 commented Oct 22, 2024

apedroferreira commented Oct 24, 2024

FabioZan86 commented Oct 24, 2024

apedroferreira commented Jul 3, 2024 •

edited

Loading

apedroferreira commented Jul 5, 2024 •

edited

Loading

apedroferreira Jul 8, 2024 •

edited

Loading

apedroferreira commented Jul 11, 2024 •

edited

Loading

apedroferreira commented Oct 21, 2024 •

edited

Loading