Blazor-Server sidenav/sidebar for Identity/Account/Manage that looks like NavMenu.razor-CodePudding

The bounty expires in 6 days. Answers to this question are eligible for a 50 reputation bounty. Krzysztof Krysztofczyk is looking for a more detailed answer to this question:

The most welcome solution is use existing blazor navbar (Shared/NavMenu.razor) in account management (/Identity/Account/Manage) pages. Of course any other solutions as well that will allow for consistent UI will be also welcome. Code of the project that can be used as an example is available on GitHub (it is is only standard project generated by VS) github.com/kkrysztofczyk/BlazorAuthTemplate.git

Default Blazor project is very inconsistent when it comes to UI. For blazor components, there is a sidenav. But for account manage /Identity/Account/Manage there is no sidenav as that is .cshtml not .razor page. I know that to have consistent UI I have to have probably two side nav and maintain exactly the same layout for both of them. Still, maybe there is already some example of sidenav for /Identity/Account/Manage that looks exactly as that available for blazor components?

The most welcome solution is use existing blazor navbar (Shared/NavMenu.razor) in account management (/Identity/Account/Manage) pages

CodePudding user response：

I have created a PR against your sample on GitHub. The change is to the _Layout.cshtml used by Identity - it's not perfect, but shows the technique.

_Layout.cshtml

@using Microsoft.AspNetCore.Hosting
@using Microsoft.AspNetCore.Mvc.ViewEngines
@inject IWebHostEnvironment Environment
@inject ICompositeViewEngine Engine
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - BlazorAuthTemplate</title>
    <base href="~/" />
    <link rel="stylesheet" href="~/Identity/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/Identity/css/site.css" />
    <link href="css/site.css" rel="stylesheet" />
</head>
<body>
  <app>
    <div class="sidebar">
      <component type="typeof(BlazorAuthTemplate.Shared.NavMenu)" render-mode="ServerPrerendered" />
    </div>
    <div class="main">
        <div class="top-row px-4 auth">
            <div class="d-sm-inline-flex flex-sm-row-reverse">
                @{
                    var result = Engine.FindView(ViewContext, "_LoginPartial", isMainPage: false);
                }
                @if (result.Success)
                {
                    await Html.RenderPartialAsync("_LoginPartial");
                }
                else
                {
                    throw new InvalidOperationException("The default Identity UI layout requires a partial view '_LoginPartial' "  
                        "usually located at '/Pages/_LoginPartial' or at '/Views/Shared/_LoginPartial' to work. Based on your configuration "  
                        $"we have looked at it in the following locations: {System.Environment.NewLine}{string.Join(System.Environment.NewLine, result.SearchedLocations)}.");
                }
            </div>
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
        <main role="main" class="content px-4 pb-3">
            @RenderBody()
        </main>
    </div>
    </app>
    <script src="~/Identity/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/Identity/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/Identity/js/site.js" asp-append-version="true"></script>
    @RenderSection("Scripts", required: false)
    <script src="/_framework/blazor.server.js"></script>
</body>
</html>