Adjusting Layout Behavior When Collapsing FluentNavMenu in Example/Demo Project

[thinkzeno]

When the 'Collapsible' property of the 'FluentNavMenu' used in the 'Example / Demo Project' layout is set to 'true,' it allows toggling between collapse and expand. However, when the menu narrows down to 40px in width, the main body area does not shift to the left and remains unchanged. How can I modify this behavior?

examples > Demo > Shared > Shared > DemoNavMenu.razor

Home

[vnbaaij]

Hi,

You can see how that is done in the sites that get created when using our templates as a starting point. See https://www.fluentui-blazor.net/Templates on how to set that up.

[thinkzeno]

Thank you for your response. In my view, there are two issues with the template. The footer doesn't consistently stay fixed, and the scrollbar behaviors differ from the example. I appreciate the layout implementation in the example, except for the aspects I mentioned.

[vnbaaij]

I'm making a change to the height of .main element for next release so footer stays fixed.
Not sure what you mean with the 'scrollbar behaviors`.

[thinkzeno]

I would like to suggest that, similar to the example, having a scrollbar on the right side of the 'NavBar' seems more natural and visually appealing than the scrollbar on the right side of the page.

[vnbaaij]

We are not going to change that behavior because we don't want to deviate from the standard templates too much

[gligorov]

We are not going to change that behavior because we don't want to deviate from the standard templates too much

Hello, @vnbaaij . Is there any update regarding this issue. I have the same problem and feel that when the menu is collapsed, the page content should expand to use all the space. It feels strange like this no. The image on this issue describes exactly the problem.

I have a latest current Blazor Server app, used the VS Template project and .NET 9 just made the app a week ago, and trying to see if there is any update on this issue. Thanks.

[vnbaaij]

@gligorov you are talking about a different issue then what my remark was about.

When using our templates, I believe the main area is expanded if you collapse the nav menu. If not, it can be changed to do that pretty easily with some standard HTML and CSS. See https://fluentui-blazor.net/NavMenu#collapsible Navigation for an example of that