Toggle Icon is not visible when interactive render mode is auto

[Emad-Eddin]

When createing a new project and selecting interactive render mode as auto. The burger toggle button is not visible. Also when the screeen size is reduced the side menu disappears and it can't be shown again.

[Emad-Eddin]

I'm quite surprised that there haven't been any comments or answers to my question so far. Is no one else encountering the same issue? Simply create a web app using auto render mode with per-page interactivity, reduce the page size, and the left navigation bar disappears. On smaller screens, it becomes inaccessible! This renders the template useless!!

[ScarletKuro]

selecting interactive render mode as auto

Using global interactive auto mode

mode with per-page interactivity

If you are using the per-page configuration, then this behavior is intentional. When you use the per-page configuration, your root (including the MainLayout, where the drawer lives) doesn't have any interactive mode and works as static SSR. As a result, we deliberately removed the button, since it wouldn't function anyway as shown below.

This is why our recommendation is to use the global mode, as it is more user-friendly for most developers. The per-page configuration is more advanced, and requires a deeper understanding of how it works under the hood.
If you still want to use the per-page configuration and have the drawer, you'll need to implement this workaround that uses JavaScript: link.

Additionally, when seeking help, we recommend posting in the "help" channel on Discord or using the discussions section in the main repo MudBlazor Discussions. Most people are active there, and the templates repo isn't frequently monitored. Thanks.