Forum Discussion
Convert the standard Blazor navigation menu to a collapsible icon menu
Gavin-Williams, thanks for sharing your solution. I encountered similar issues when implementing it with .NET 8. To assist others, I've created a GitHub repository called CollapsibleNavMenu that incorporates these changes. This repo also includes a submenu system designed to mimic the behaviour of Azure DevOps, building on MMaybe990's implementation.
Additionally, I added some JavaScript to address the issue identified by clockwiseq where changing the page width after collapsing the Nav Menu caused problems. The submenus are now uncoupled and can be independently expanded, which might interest SCAppDev.
I hope this helps others in the future!
- PeterWakJul 27, 2024Copper Contributor
Thank you H3ALY. Your solution works great but it messes up the login process. The login page blinks endlessly.
- H3ALYJul 28, 2024Copper Contributor
The issue seems to be more with Identity, the default .NET8 WebApp configuration for a interactive blazor server will set the render mode in the HeadOutlet as:
<HeadOutlet @rendermode="InteractiveServer" />
with the following route:
<Routes @rendermode="InteractiveServer" />
The issue you're seeing is because Identity is expecting the HttpContext to not be null.
AccountLayout.Razor
@if (HttpContext is null) { <p>Loading...</p> } else { @Body } @code { [CascadingParameter] private HttpContext? HttpContext { get; set; } protected override void OnParametersSet() { if (HttpContext is null) { // If this code runs, we're currently rendering in interactive mode, so there is no HttpContext. // The identity pages need to set cookies, so they require an HttpContext. To achieve this we // must transition back from interactive mode to a server-rendered page. NavigationManager.Refresh(forceReload: true); } } }
This is raised here -Update Identity Components in Blazor project template A work around was provided in this issue - Make RenderTreeBuilder.AddComponentRenderMode's renderMode parameter nullable
You can update App.Razor with:
<HeadOutlet @rendermode="@RenderModeForPage" /> <Routes @rendermode="@RenderModeForPage" />
also including the following code block:
@code{ [CascadingParameter] HttpContext HttpContext { get; set; } = default!; IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account") ? null : RenderMode.InteractiveServer; }
Which I've tested and seems to work, however the tests aren't extensive to say the least.