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="tabletButton">
            <div class="tabletMenuTitle">
                Menu
            </div>
        </div>
    </div>


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


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

            <div>
                <div>
                    @_section.Name
                </div>

                <div class="tabletNavItems">
                    @foreach (var _page in pages) {
                        if (_page.IsPrivate.Equals("True")) {
                            continue;
                        }
                        <NavLink href="@_page.Href" class="tabletNavItem" @onclick="OnPageClicked">
                            @_page.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;
    }

    .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;
    }

}