Blazor Issue With Layout

Question

I have been following this blog:

Custom Blazor Authentication

Everything works perfectly, until I actually get logged in, then the layout goes haywire:

Clearly I have done something wrong (and I know it's going to be a silly schoolboy error) as nobody else has commented on this issue in the blog. However, being new to Blazor, I don't know where to start tracking down the issue, hence I haven't posted any of my code as I have no clue what you would need to help me. Any help gratefully received.

**EDIT

MainLayout.razor:

@inherits LayoutComponentBase
@inject NavigationManager navigationManager
@inject CustomStateProvider authStateProvider

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row">
        <button type="button" class="btn btn-link ml-md-auto" 
        @onclick="@LogoutClick">Logout</button>
    </div>

    <div class="content px-4">
        @Body
    </div>
</div>
@functions {

    [CascadingParameter]
    Task<AuthenticationState> AuthenticationState { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        if (!(await AuthenticationState).User.Identity.IsAuthenticated)
        {
            navigationManager.NavigateTo("/login");
        }
    }
    async Task LogoutClick()
    {
        await authStateProvider.Logout();
        navigationManager.NavigateTo("/login");
    }
}

App.razor:

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

**SECOND EDIT

I don't know why, but I have a feeling it may be linked to the addition of this page:

AuthLayout.razor:

@inherits LayoutComponentBase
<div class="main">
    <div class="content px-4">
        @Body
    </div>
</div>

Which is referenced in my custom login and register pages by the line:

@layout AuthLayout

Don't know if this helps or not.

Answer 1

Ok, it seems like you have removed the top original top div <div class="page">

When I put it back in your MainLayout it seems to fix the issue. Now, you will need to read on the class="page" to understand why it matters, I do not know.

<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row">
            <button type="button" class="btn btn-link ml-md-auto">
                Logout
            </button>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</div>