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

@inherits LayoutComponentBase

<div class="tablet">
    <div class="tabletHeader" @onclick="OnNavClicked" @onclick:preventDefault="true" @onclick:stopPropagation="true">
        <div class="tabletTitle">
            IGP Fan Reference
        </div>
        <div class="tabletButtons">

            <SearchButtonComponent/>
            <div class="tabletButton">
                <div class="tabletMenuTitle">
                    <i class="fa-solid fa-bars" style="font-size: 32px; margin:auto"></i>
                </div>
            </div>
        </div>
    </div>


    <div class="fullPageButton @navOpen" @onclick="OnNavClicked" @onclick:stopPropagation="false"
         @onclick:preventDefault="false">
    </div>


    <div class="tabletNav @navOpen">
        @foreach (var webSection in WebSections)
        {
            var pages = (from page in WebPages
                where page.WebSectionModelId == webSection.Id
                select page).ToList();

            <div>
                <div>
                    @webSection.Name
                </div>

                <div class="tabletNavItems">
                    @foreach (var webPage in pages)
                    {
                        if (webPage.IsPrivate.Equals("True"))
                        {
                            continue;
                        }

                        <NavLink href="@webPage.Href" class="tabletNavItem" @onclick="OnPageClicked">
                            @webPage.Name
                        </NavLink>
                    }
                </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;
    }

    .tablet {
        display: none;
    }

    .tabletNav {
        position: fixed;
        background-color: rgba(30, 30, 30, 0.98);
        display: none;
        height: 100vh;
        padding: 32px;
        overflow-y: auto;
        overflow-x: hidden;
        top: 0px;
        gap: 22px;
        flex-direction: column;
    }

    .tabletButtons {
        display: flex;
        gap: 12px;
    }


    .tabletNavItem {
        padding: 8px;
    }

    .tabletNavItems {
        display: flex;
        flex-direction: column;
    }

    .tabletNav.True {
        display: flex;
    }

    .tabletHeader {
        height: 60px;
        width: 100vw;
        position: fixed;
        top: 0;
        display: flex;
        background-color: var(--accent);
        border-bottom: 4px solid rgba(0, 0, 0, 0.95);
        justify-content: space-between;
    }

    .tabletMenuTitle {
        margin: auto;
        font-weight: 700;
    }

    .tabletTitle {
        margin: auto;
        font-weight: 700;
        font-size: 1.4rem;
    }

    .tabletButton {
        border: 2px solid black;
        background-color: rgba(0, 0, 0, 0.3);
        width: 80px;
        height: 100%;
        display: flex;
        cursor: pointer;
    }

    .tabletButton:hover {
        background-color: rgba(0, 0, 0, 0.7);
    }


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

    @@media only screen and (max-width: 480px) {
        .tablet {
            display: none;
        }
    }
</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


    bool navOpen = true;

    void OnNavClicked(EventArgs eventArgs)
    {
        navOpen = !navOpen;
    }


    void OnPageClicked(EventArgs eventArgs)
    {
        navOpen = false;
    }

}