Allow hiding the navigation bar and toggle button

[vikasgurjar]

Summary

Allow hiding the navigation bar and toggle button in case we just want to show the header

Examples

No response

Motivation

In my app I want to use toolpad to handle navigation and header after a user logs in. But I have a case where user needs to wait before they are verified to see other pages, and on that page I just need the header.

I guess I can use the AppBar component from MUI but that would require me to handle account flow separately.

Search keywords: hide navigation

[Janpot]

As far as I can see, we could approach this in two different ways:

1. Support a hideNavigation: boolean prop to hide the navigation surface
2. Provide slots for each top-level surface (navigation, appBar) so that you can replace it with an empty component

any other ideas?

[vikasgurjar]

1. Support a hideNavigation: boolean prop to hide the navigation surface

This should be straight forward. I can work on this and raise a PR too. I wanted to know other than the changes in the core package, test cases and docs update for the new prop, is there a need for example too?

[bharatkashyap]

2. Provide slots for each top-level surface (navigation, appBar) so that you can replace it with an empty component

This makes sense to me from a long-term reusability perspective - separating the drawer and appBar into separate slots which can be overriden

[apedroferreira]

any other ideas?

We've talked about separating the components that make up the layout and exporting them, including the header and the sidebar. I guess that might also work?

This should be straight forward. I can work on this and raise a PR too. I wanted to know other than the changes in the core package, test cases and docs update for the new prop, is there a need for example too?

If we go for that solution I guess that should be enough, and as an example just maybe a small demo and paragraph in the docs.

[apedroferreira]

On second thought the hideNavigation prop makes most sense for now as it can be used to hide the menu icon too besides the sidebar itself, which the other options wouldn't be able to do so elegantly.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@vikasgurjar How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.