fix(nav): per-parent dropdown collapsed state; reset on focusout
HashSet<string> _collapsedDropdowns replaces single bool so each parent tracks its own dismiss state independently. onfocusout added alongside onmouseleave so keyboard users get the dropdown re-enabled without a mouse pass after Enter-activating a child link.
This commit is contained in:
@@ -17,15 +17,16 @@
|
|||||||
dd-nav-item-collapsed is added on child click to force-hide the
|
dd-nav-item-collapsed is added on child click to force-hide the
|
||||||
dropdown after SPA navigation (which keeps the DOM and may leave
|
dropdown after SPA navigation (which keeps the DOM and may leave
|
||||||
:hover true). It is cleared on mouseleave so the next hover works. *@
|
:hover true). It is cleared on mouseleave so the next hover works. *@
|
||||||
<li class="dd-nav-item-parent @(_dropdownCollapsed ? "dd-nav-item-collapsed" : "")"
|
<li class="dd-nav-item-parent @(_collapsedDropdowns.Contains(navPage.Route) ? "dd-nav-item-collapsed" : "")"
|
||||||
@onmouseleave="ResetDropdown">
|
@onmouseleave="() => ResetDropdown(navPage.Route)"
|
||||||
|
@onfocusout="() => ResetDropdown(navPage.Route)">
|
||||||
<a href="@navPage.Route" class="dd-nav-link">@navPage.Name</a>
|
<a href="@navPage.Route" class="dd-nav-link">@navPage.Name</a>
|
||||||
<ul class="dd-nav-dropdown">
|
<ul class="dd-nav-dropdown">
|
||||||
@foreach (var child in navPage.Children)
|
@foreach (var child in navPage.Children)
|
||||||
{
|
{
|
||||||
<li>
|
<li>
|
||||||
<a href="@child.Route" class="dd-nav-link dd-nav-dropdown-link"
|
<a href="@child.Route" class="dd-nav-link dd-nav-dropdown-link"
|
||||||
@onclick="CollapseDropdown">@child.Name</a>
|
@onclick="() => CollapseDropdown(navPage.Route)">@child.Name</a>
|
||||||
</li>
|
</li>
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
@@ -95,7 +96,7 @@
|
|||||||
[Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
|
[Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
|
||||||
|
|
||||||
private bool _mobileMenuOpen;
|
private bool _mobileMenuOpen;
|
||||||
private bool _dropdownCollapsed;
|
private readonly HashSet<string> _collapsedDropdowns = [];
|
||||||
|
|
||||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||||
{
|
{
|
||||||
@@ -129,7 +130,7 @@
|
|||||||
|
|
||||||
private void CloseMobileMenu() => _mobileMenuOpen = false;
|
private void CloseMobileMenu() => _mobileMenuOpen = false;
|
||||||
|
|
||||||
private void CollapseDropdown() => _dropdownCollapsed = true;
|
private void CollapseDropdown(string route) => _collapsedDropdowns.Add(route);
|
||||||
|
|
||||||
private void ResetDropdown() => _dropdownCollapsed = false;
|
private void ResetDropdown(string route) => _collapsedDropdowns.Remove(route);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user