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

@using Model.Website
@using Microsoft.EntityFrameworkCore

<div class="mobileFooter">
    <div class="mobileNavSectionsContainer">
        @foreach (var webSection in WebSections) {
            <div class="mobileNavSectionButton" @onclick="() => OnSectionClicked(webSection)" @onclick:preventDefault="true" @onclick:stopPropagation="true">
                <div class="mobileNavSectionButtonText">
                    @webSection?.Name
                </div>
            </div>
        }
    </div>

    <div class="fullPageButton @(selectedSection != null)" @onclick="OnPageClicked" @onclick:stopPropagation="false" @onclick:preventDefault="false">
    </div>

    @if (selectedSection != null) {
        List<WebPageModel?> webPages = (from page in WebPages
            where page.WebSectionModelId == selectedSection.Id
            select page).ToList()!;

        <div class="mobileNavPagesContainer">
            @foreach (var webPage in webPages) {
                if (webPage!.IsPrivate.Equals("True")) {
                    continue;
                }
                <div class="mobileNavPageButton" @onclick="() => OnPageLinkClicked(webPage)" @onclick:preventDefault="true" @onclick:stopPropagation="true">
                    <div class="mobileNavPageButtonText">
                        @webPage.Name
                    </div>
                </div>
            }
        </div>
    }
</div>


<style>
    .fullPageButton {
        position: fixed;
        width: 100vw;
        height: 100vh;
        bottom: 0;
        display: none;
        background-color: rgba(0,0,0,0.6);
    }

    .fullPageButton.True {
        display: block;
    }


    .mobileFooter {
        position: fixed;
        background-color: rgba(0,0,0,1);
        width: 100vw;
        bottom: 0;
        display: none;
    }

    .mobileNavPagesContainer {
        position: fixed;
        display: flex;
        flex-direction: column;
        bottom: 0;
        width: 100vw;
        background-color: black;
        padding-bottom: 6px;
        padding-top: 6px;
        padding-left: 4px;
        padding-right: 4px;
        gap: 2px;
    }

    .mobileNavSectionsContainer {
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        width: 100%;
        padding-bottom: 6px;
        padding-top: 6px;
        padding-left: 4px;
        padding-right: 4px;
        gap: 2px;
    }

    .mobileNavSectionButton {
        border: 1px solid var(--primary);
        width: 100%;
        height: 64px;
        display: flex;
        background-color: var(--primary);
        cursor: pointer;
    }

    .mobileNavPageButton {
        border: 1px solid var(--primary);
        width: 100%;
        height: 64px;
        display: flex;
        background-color: var(--primary);
        cursor: pointer;
    }


        .mobileNavPageButton:hover {
            background-color: var(--primary-hover);
            border-color: var(--primary-border-hover);
        }


    .mobileNavSectionButton:hover {
        background-color: var(--primary-hover);
        border-color: var(--primary-border-hover);
    }

    .mobileNavSectionButtonText {
        font-size: 0.75rem;
        text-align: center;
        margin: auto;
        font-weight: bolder;
    }

    .mobileNavPageButtonText {
        font-size: 1.1rem;
        text-align: center;
        margin: auto;
        font-weight: bolder;
    }

    @@media only screen and (max-width: 480px) {
        .mobileFooter {
            display: block;
        }
    }
</style>

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

    [Parameter]
    public List<WebPageModel> WebPages { get; set; } = default!;
    
#else
    [Parameter]
    public DbSet<WebSectionModel> WebSections { get; set; }

    [Parameter]
    public DbSet<WebPageModel> WebPages { get; set; }
#endif
    
    [Inject]
    public NavigationManager NavigationManager { get; set; } = default!;


    private WebSectionModel? selectedSection;
    private  WebPageModel? selectedPage;


    void OnSectionClicked(WebSectionModel? webSection) {
        selectedSection = webSection;
    }

    void OnPageLinkClicked(WebPageModel? webPage) {
        selectedPage = webPage;
        selectedSection = null;

        NavigationManager.NavigateTo(webPage?.Href!);
    }

    void OnPageClicked(EventArgs eventArgs) {
        selectedPage = null;
        selectedSection = null;
    }

}