HeaderBar.razor

@using Microsoft.AspNetCore.Components.Endpoints

<div class="eshop-header @(IsCatalog? "home" : "")">
    <div class="eshop-header-hero">
        @{
            var headerImage = IsCatalog ? "images/header-home.webp" : "images/header.webp";
        }
        <img role="presentation" src="@headerImage" />
    </div>
    <div class="eshop-header-container">
        <nav class="eshop-header-navbar">
            <a class="logo logo-header" href="">
                <img alt="AdventureWorks" src="images/logo-header.svg" class="logo logo-header" />
            </a>
            
            <ThemeToggle />
            <UserMenu />
            <CartMenu />
        </nav>
        <div class="eshop-header-intro">
            <h1><SectionOutlet SectionName="page-header-title" /></h1>
            <p><SectionOutlet SectionName="page-header-subtitle" /></p>
        </div>
    </div>
</div>

@code {
    [CascadingParameter]
    public HttpContext? HttpContext { get; set; }

    // We can use Endpoint Metadata to determine the page currently being visited
    private Type? PageComponentType => HttpContext?.GetEndpoint()?.Metadata.OfType<ComponentTypeMetadata>().FirstOrDefault()?.Type;
    private bool IsCatalog => PageComponentType == typeof(Pages.Catalog.Catalog);
}