@* A collapsible sidebar nav section: an uppercase-eyebrow header button that
   toggles the visibility of its child nav items. The header <li> and the item
   <li>s (ChildContent) render as siblings inside NavMenu's <ul>. *@

<li class="nav-item">
    <button type="button"
            class="nav-section-toggle"
            @onclick="OnToggle"
            aria-expanded="@(Expanded ? "true" : "false")">
        <i class="bi @(Expanded ? "bi-chevron-down" : "bi-chevron-right")" aria-hidden="true"></i>
        <span>@Title</span>
    </button>
</li>
@if (Expanded)
{
    @ChildContent
}

@code {
    /// <summary>Section label shown in the header (e.g. "Deployment").</summary>
    [Parameter, EditorRequired]
    public string Title { get; set; } = string.Empty;

    /// <summary>Whether the section is expanded — its items rendered.</summary>
    [Parameter]
    public bool Expanded { get; set; }

    /// <summary>Raised when the header button is clicked.</summary>
    [Parameter]
    public EventCallback OnToggle { get; set; }

    /// <summary>The section's nav items, rendered only while expanded.</summary>
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}