User Profile
H3ALY
Copper Contributor
Joined Nov 30, 2018
User Widgets
Recent Discussions
Re: Convert the standard Blazor navigation menu to a collapsible icon menu
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 -https://github.com/dotnet/aspnetcore/pull/51134 A work around was provided in this issue - https://github.com/dotnet/aspnetcore/issues/51170 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.13KViews0likes1CommentRe: 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 https://github.com/H3ALY/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!19KViews4likes4Comments
Recent Blog Articles
No content to show