Author : MD TAREQ HASSAN | Updated : 2021/02/19

Fixed topbar

Model classes for MainLayout

Models/ViewModels/LoggedInUser.cs

namespace BlazorWebAssemblyCrudApp.InMemory.Models.ViewModels
{
    public class LoggedInUser
    {
        public string Surname { get; set; }

        public string GivenName { get; set; }

        public string EmailAddress { get; set; }

        public bool IsAdmin { get; set; } = false;
    }
}

Authentication and Logged in user information

MainLayout component

Shared/MainLayout.razor.cs

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Authorization;
using System.Threading.Tasks;

namespace BlazorWebAssemblyCrudApp.InMemory.Shared
{
    public class MainLayoutBase : LayoutComponentBase
    {
        //
        // A task that will provide Identity information of loggedin user
        //
        [CascadingParameter]
        protected Task<AuthenticationState> AuthenticationStateTask { get; set; }

        //
        // Loggedin user info. model
        //
        public LoggedInUser CurrentLoggedInUser { get; set; }

        protected override async Task OnParametersSetAsync()
        {
            var authState = await AuthenticationStateTask;

            var surname = authState.ExtractSurname();

            var givenName = authState.ExtractGivenName();

            var emailAddress = authState.ExtractEmailAddress();

            CurrentLoggedInUser = new LoggedInUser() { Surname = surname, GivenName = givenName, EmailAddress = emailAddress };
        }
    }
}

Shared/MainLayout.razor

@inherits MainLayoutBase

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-sm-3 sticky-top">
        <div class="container">
            <img src="image/logo.svg" class="col-sm-3 text-left" />
            <h3 class="col-sm text-left">AutoMail Master Maintenance</h3>
            @if (!string.IsNullOrWhiteSpace(CurrentLoggedInUser.EmailAddress))
            {
                <p class="my-sm-auto">@CurrentLoggedInUser.EmailAddress</p>
            }
            @if (!string.IsNullOrWhiteSpace(CurrentLoggedInUser.Surname) && !string.IsNullOrWhiteSpace(CurrentLoggedInUser.GivenName))
            {
                <TextAvatar Surname="@CurrentLoggedInUser.Surname" GivenName="@CurrentLoggedInUser.GivenName" />
            }
        </div>
    </nav>
</header>


<div class="container" style="position: relative;">

    <div class="toast mt-sm-2 fade hide" role="alert" data-delay="2500" data-animation="true" aria-live="assertive" aria-atomic="true" style="position: absolute; top: 0; right: 0; z-index:1000; min-width: 25%;">
        
		<div class="toast-header bg-success text-white">
            <strong class="mr-sm-auto">Success</strong>
            <button type="button" class="ml-2 mb-1 close text-white" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
		</div>
		
        <div class="toast-body bg-light"></div>
		
    </div>
	
    <main role="main" class="pb-3">
	
        <CascadingValue Value="@CurrentLoggedInUser">
            @Body
        </CascadingValue>
		
    </main>
</div>