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

@inherits LayoutComponentBase
@inject INavigationService NavigationService
@implements IDisposable

@{
    var visibleStyle = NavigationService.GetNavigationSectionId() > 0 ? "clickOffVisible" : "";
}

<div onclick="@MenuClosed" class="clickOffBackground @visibleStyle">

</div>

<div class="desktopNavContainer">
    <div class="menuHeader">
        <NavLink id="desktop-homeLink" href="/" class="websiteTitle">
            <i class="fa-solid fa-house" style="margin-right: 4px;"></i> IGP Fan Reference
        </NavLink>

        <div class="sectionNavs">
            @foreach (var webSection in WebSections)
            {
                var isSelected = NavigationService.GetNavigationSectionId().Equals(webSection.Id);
                var sectionButtonStyle = "sectionButton";
                if (isSelected)
                {
                    sectionButtonStyle += " sectionButtonSelected";
                }

                <div class="sectionNav">

                    <button onclick="@(() => { MenuClicked(webSection.Id); })" class="@sectionButtonStyle">
                        <i class="fa-solid @webSection.Icon"></i>
                        @if (!webSection.OnlyIcon)
                        {
                            <span style="margin-left: 12px">@webSection.Name</span>
                        }
                    </button>
                    @if (isSelected)
                    {
                        <div class="navMenuPosition">
                            <div class="navMenuContainer">
                                <DesktopNavSectionComponent Section="@webSection"/>
                            </div>
                        </div>
                    }
                </div>
            }
        </div>

        <SearchButtonComponent Id="desktop-searchButton"/>
    </div>
</div>

<style>
    .clickOffBackground {
        top: 0;
        left: 0;
        position: fixed;
        width: 100vw;
        height: 100vh;
        visibility: hidden;
    }

    .clickOffBackground.clickOffVisible {
        visibility: visible;
    }

    .sectionButton {
        cursor: pointer;
        padding: 12px;
        position: relative;
        z-index: 50000;
    }

    .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-top: 12px;
        padding-bottom: 12px;

        padding-left: 24px;
        padding-right: 24px;

        display: flex;
        background-color: var(--accent);

        justify-content: space-between;
        align-items: center;

    }


    .sectionNavs {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .sectionNav {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .websiteTitle {
        font-weight: bold;
        color: white;
        margin-right: 32px;
    }

    .navMenuPosition {
        position: relative;
        top: 18px;
        left: calc(-50% + -330px / 2);
        width: 0;
        height: 0;
    }

    .navMenuContainer {
        width: 330px;
        flex-direction: row;
        gap: 20px;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 4px;
        padding-right: 4px;
        background-color: rgba(22, 22, 24, 0.95);
        border: 1px solid black;
        border-radius: 4px;
        display: flex;
    }

    .sectionButtonSelected {
        box-shadow: 0 2px 3px black;
        background-color: var(--info);
        transform: translateY(-1px) scale(1.08);
        border-radius: 12px;
    }

    @@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()
    {
        base.OnInitialized();
        NavigationService.Subscribe(StateHasChanged);
    }

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

    void MenuClicked(int menuName)
    {
        NavigationService.ChangeNavigationSectionId(menuName);
    }

    void MenuClosed()
    {
        NavigationService.ChangeNavigationSectionId(-1);
    }

    void HoverOut(MouseEventArgs mouseEventArgs)
    {
        NavigationService.ChangeNavigationState(NavigationStateType.Default);
    }

}