NavMenu.razor

@* Copyright (C) Jonathan Shull - See license file at github.com/amytho/pdf-acc-toolset *@
@using Pdf_Acc_Toolset.Services

<div class="top-row navbar navbar-dark">
    <div class="flex justify-between sm:justify-center h-full">
        <a class="navbar-brand self-center" href="">Pdf-Acc-Toolset</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            Toggle
        </button>
    </div>
</div>

<div class="@NavMenuCssClass">
    <nav class="flex flex-col">
        <div class="py-2 px-3 w-full">
            <NavLink class="block text-white hover:text-slate-100 hover:!bg-slate-700 px-4 py-2 w-full rounded-lg" href="" Match="NavLinkMatch.All">
                Import
            </NavLink>
        </div>
        <div class="py-2 px-3 w-full">
            <NavLink class="block text-white hover:text-slate-100 hover:!bg-slate-700 px-4 py-2 w-full rounded-lg" href="tools" Match="NavLinkMatch.All">
                Tools
            </NavLink>
        </div>
        <div class="py-2 px-3 w-full">
            <NavLink class="flex text-white hover:text-slate-100 hover:!bg-slate-700 px-4 py-2 w-full rounded-lg items-center" href="tasks">
                <span class="self-center">Queued Tasks
                </span>
                @if (taskCounter != null)
                {
                    <Badge content="@taskCounter" />
                }
            </NavLink>
        </div>
        <div class="py-2 px-3 w-full">
            <NavLink class="block text-white hover:text-slate-100 hover:!bg-slate-700 px-4 py-2 w-full rounded-lg" href="export" title="Review and Export">
                Export
            </NavLink>
        </div>
        <div class="py-2 px-3 w-full">
            <NavLink class="block text-white hover:text-slate-100 hover:!bg-slate-700 px-4 py-2 w-full rounded-lg" href="https://docs.pdf-accessibility.tools" target="_blank">
                Documentation
            </NavLink>
        </div>
        <div class="py-2 px-3 w-full">
            <button @onclick="ToggleInspector" class="text-white hover:text-slate-100 hover:!bg-slate-600 px-4 py-2 w-full rounded-lg text-left">Toggle Inspector</button>
        </div>
        @* Only show the dev menu in dev mode. *@
        @if (Config.Env.Equals("Development")) {
        <div class="py-2 px-3 w-full">
            <NavLink class="block text-white hover:text-slate-100 hover:!bg-slate-700 px-4 py-2 w-full rounded-lg" href="testing">
                Developer
            </NavLink>
        </div>
        }
    </nav>
</div>

@code {
    private bool collapseNavMenu = false;

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    // Counter of the non-completed tasks
    private string taskCounter = null;

    [Parameter]
    public EventCallback<int> OnTagInspectorClicked { get; set; }

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

    protected override void OnInitialized()
    {
        // When the task amount changes, show the new value
        TaskManager.OnTaskAmountChanged += (sender, amount) =>
        {
            // If the task amount is 0, hide the badge. Else, display the new amount
            if (amount == 0) {
                taskCounter = null;
            } else {
                taskCounter = amount.ToString();
            }
            // Re-render badge
            StateHasChanged();
        };

        base.OnInitialized();
    }

    private void ToggleInspector()
    {
        this.OnTagInspectorClicked.InvokeAsync();
    }
}