From c44117ccc52da55c2e68646750e08a244174f13a Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sat, 13 Jun 2026 19:45:55 -0400
Subject: [PATCH 1/2] fix(8.J): close ARCHIVE dropdown on child link click

Add dd-nav-item-collapsed CSS class toggled on child click to override the
:hover/:focus-within show rules. Cleared on mouseleave so hover-to-open
works normally on the next pass. Mirrors the existing CloseMobileMenu pattern.
---
 DeepDrftPublic.Client/Layout/DeepDrftMenu.razor  | 16 +++++++++++++---
 .../Layout/DeepDrftMenu.razor.css                |  9 +++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor b/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
index 4c638f7..d7d04a5 100644
--- a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
+++ b/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
@@ -13,14 +13,19 @@
                 @if (navPage.HasChildren)
                 {
                     @* Dual-role node: the parent anchor navigates to its own route on click,
-                       while hover/focus reveals the child dropdown (pure CSS, no JS). *@
-                    <li class="dd-nav-item-parent">
+                       while hover/focus reveals the child dropdown (pure CSS, no JS).
+                       dd-nav-item-collapsed is added on child click to force-hide the
+                       dropdown after SPA navigation (which keeps the DOM and may leave
+                       :hover true). It is cleared on mouseleave so the next hover works. *@
+                    <li class="dd-nav-item-parent @(_dropdownCollapsed ? "dd-nav-item-collapsed" : "")"
+                        @onmouseleave="ResetDropdown">
                         <a href="@navPage.Route" class="dd-nav-link">@navPage.Name</a>
                         <ul class="dd-nav-dropdown">
                             @foreach (var child in navPage.Children)
                             {
                                 <li>
-                                    <a href="@child.Route" class="dd-nav-link dd-nav-dropdown-link">@child.Name</a>
+                                    <a href="@child.Route" class="dd-nav-link dd-nav-dropdown-link"
+                                       @onclick="CollapseDropdown">@child.Name</a>
                                 </li>
                             }
                         </ul>
@@ -90,6 +95,7 @@
     [Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
 
     private bool _mobileMenuOpen;
+    private bool _dropdownCollapsed;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -122,4 +128,8 @@
     private void ToggleMobileMenu() => _mobileMenuOpen = !_mobileMenuOpen;
 
     private void CloseMobileMenu() => _mobileMenuOpen = false;
+
+    private void CollapseDropdown() => _dropdownCollapsed = true;
+
+    private void ResetDropdown() => _dropdownCollapsed = false;
 }
diff --git a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor.css b/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor.css
index 7d5f05a..1d4f6e8 100644
--- a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor.css
+++ b/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor.css
@@ -129,6 +129,15 @@
     pointer-events: auto;
 }
 
+/* Force-close the dropdown immediately after a child link is clicked (SPA navigation
+   keeps the DOM and :hover may remain true). Cleared on mouseleave so the next
+   hover cycle works normally. */
+.dd-nav-item-parent.dd-nav-item-collapsed .dd-nav-dropdown {
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+}
+
 .dd-nav-dropdown-link {
     white-space: nowrap;
 }

From 86999cb94ec38a549ca01c1eb14d99911aa975a7 Mon Sep 17 00:00:00 2001
From: daniel-c-harvey <the.real.daniel.harvey@gmail.com>
Date: Sat, 13 Jun 2026 20:00:20 -0400
Subject: [PATCH 2/2] 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.
---
 DeepDrftPublic.Client/Layout/DeepDrftMenu.razor | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor b/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
index d7d04a5..9cfb97d 100644
--- a/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
+++ b/DeepDrftPublic.Client/Layout/DeepDrftMenu.razor
@@ -17,15 +17,16 @@
                        dd-nav-item-collapsed is added on child click to force-hide the
                        dropdown after SPA navigation (which keeps the DOM and may leave
                        :hover true). It is cleared on mouseleave so the next hover works. *@
-                    <li class="dd-nav-item-parent @(_dropdownCollapsed ? "dd-nav-item-collapsed" : "")"
-                        @onmouseleave="ResetDropdown">
+                    <li class="dd-nav-item-parent @(_collapsedDropdowns.Contains(navPage.Route) ? "dd-nav-item-collapsed" : "")"
+                        @onmouseleave="() => ResetDropdown(navPage.Route)"
+                        @onfocusout="() => ResetDropdown(navPage.Route)">
                         <a href="@navPage.Route" class="dd-nav-link">@navPage.Name</a>
                         <ul class="dd-nav-dropdown">
                             @foreach (var child in navPage.Children)
                             {
                                 <li>
                                     <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>
                             }
                         </ul>
@@ -95,7 +96,7 @@
     [Parameter] public required EventCallback<bool> IsDarkModeChanged { get; set; }
 
     private bool _mobileMenuOpen;
-    private bool _dropdownCollapsed;
+    private readonly HashSet<string> _collapsedDropdowns = [];
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -129,7 +130,7 @@
 
     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);
 }