IGP-Fan-Reference/Components/Navigation/DesktopNavComponent.razor

@inherits LayoutComponentBase
@inject INavigationService navigationService
@implements IDisposable

<div onmouseleave="@HoverOut" class="desktopNavContainer">
    <div class="menuHeader" @onmouseover="() => navigationService.ChangeNavigationState(NavigationStateType.Hovering_Menu)">
        <NavLink href="/" class="websiteTitle">
            IGP Fan Reference
        </NavLink>

        @foreach (var webSection in WebSections) {
            <div class="sectionButton">@webSection.Name</div>
        }
    </div>

    @{
        var hoveredStyle = NavigationStateType.Hovering_Menu.Equals(navigationService.GetNavigationState()) ?
            "navMenuContainerShow" : "";
    }
    <div class="navMenuContainer @hoveredStyle">
        @foreach (var section in WebSections) {
            var pages = (from page in WebPages
                where page.WebSectionModelId == section.Id
                select page).ToList();

            <NavSectionComponent Section=section Children=pages/>
        }
    </div>
</div>

<style>
    .sectionButton {
        cursor: pointer;    
    }

    .desktopNavContainer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 40px;
        background-color: rgba(255,255,255,0.1);
    }

    .menuHeader {
        border-bottom: 4px solid black;
        position: fixed;
        width: 100%;
        padding: 12px;
        display: flex;
        justify-content: center;
        gap: 32px;
        height: 50px;
        background-color: var(--accent);
    }


    .websiteTitle {
        font-weight: bold;
        color: white;
    }

    .navMenuContainer {
        display: none;
        position: fixed;
        top: 50px;
        flex-direction: row;
        gap: 20px;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        border-bottom: 4px solid black;
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: rgba(22, 22, 24, 0.95);
    }

    .navMenuContainerShow {
        display: flex;
    }


    @@media only screen and (max-width: 1025px) {
        .desktopNavContainer {
            display: none;
        }
    }

    @@media only screen and (max-width: 480px) {
        .desktopNavContainer {
            display: none;
        }
    }

</style>

@code {
    
    [Parameter] public List<WebSectionModel> WebSections { get; set; } = default!;

    [Parameter] public List<WebPageModel> WebPages { get; set; } = default!;
    

    protected override void OnInitialized() {
        navigationService.Subscribe(StateHasChanged);
    }

    void IDisposable.Dispose() {
        navigationService.Unsubscribe(StateHasChanged);
    }

    void HoverOut(MouseEventArgs mouseEventArgs) {
        Console.WriteLine(NavigationStateType.Default);
        navigationService.ChangeNavigationState(NavigationStateType.Default);
    }

}