Make the seven sidebar section groups (Admin, Design, Deployment, Notifications, Site Calls, Monitoring, Audit) collapsible. New NavSection component renders a header toggle button (chevron) and reveals its items only while expanded; NavMenu owns the expanded-section set. Behaviour: sections are collapsed by default; state persists in the `scadabridge_nav` cookie (written/read via the new nav-state.js JS interop, mirroring treeview-storage.js) so it survives reloads and reconnects; navigating into a section auto-expands it and remembers it. The Dashboard item stays sectionless and always visible. Tests: NavMenu bUnit tests expand sections before asserting items and add collapsed-by-default / toggle / cookie-persistence cases; Playwright nav tests expand sections before clicking links; new NavCollapseTests covers the feature E2E. Build 0 warnings; bUnit 545 passed; Playwright nav suite green (the unrelated AuditGridColumnTests resize-reload case remains pre-existing flaky — an un-awaited save race in that test).
36 lines
1.2 KiB
Plaintext
36 lines
1.2 KiB
Plaintext
@* 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; }
|
|
}
|