Close NavigationMenu, NodeActionMenu, and VersionHistoryMenu when clicking outside

Agent-Logs-Url: https://github.com/VidetteMakes/MESS/sessions/3a065751-9fe3-47c1-a57d-a5fbe41e0dda

Co-authored-by: adamj537 <11276599+adamj537@users.noreply.github.com>

Author: Copilot

MESS/MESS.Blazor/Components/Navigator/NavigationMenu.razor

@@ -9,6 +9,11 @@
         ☰
     </button> *@
 
+    @if (IsOpen)
+    {
+        <div class="sidebar-backdrop" @onclick="OnToggleClicked"></div>
+    }
+
     <!-- Sidebar Panel -->
     <div class="sidebar-panel @(IsOpen ? "open" : "closed")" style="padding: 1rem;">
         <div class="d-flex justify-content-between align-items-center mb-3">

MESS/MESS.Blazor/Components/Navigator/NavigationMenu.razor.css

@@ -22,6 +22,17 @@
     transform: translateX(-100%); /* slide out */
 }
 
+.sidebar-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1049;
+    background-color: transparent;
+    cursor: default;
+}
+
 /* Dark mode overrides */
 body.dark-mode .sidebar-panel {
     background-color: #1e1e1e;

MESS/MESS.Blazor/Components/Pages/Phoebe/WorkInstruction/VersionHistoryMenu.razor

@@ -1,6 +1,12 @@
 @using MESS.Services.DTOs.WorkInstructions.Version
 
-<div class="sidebar-panel @(IsOpen ? "open" : "closed")">
+<div class="version-history-container">
+    @if (IsOpen)
+    {
+        <div class="sidebar-backdrop" @onclick="OnToggleClicked"></div>
+    }
+
+    <div class="sidebar-panel @(IsOpen ? "open" : "closed")">
     <!-- Sidebar Header -->
     <div class="sidebar-header d-flex justify-content-between align-items-center mb-3">
         <h5>Version History</h5>
@@ -75,6 +81,7 @@
         </div>
     }
 </div>
+</div>
 
 
 @code {

MESS/MESS.Blazor/Components/Pages/Phoebe/WorkInstruction/VersionHistoryMenu.razor.css

@@ -1,4 +1,15 @@
-.sidebar-panel {
+.sidebar-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1049;
+    background-color: transparent;
+    cursor: default;
+}
+
+.sidebar-panel {
     position: fixed;
     top: 0;
     right: 0;       /* pinned to right */

MESS/MESS.Blazor/Components/Pages/Phoebe/WorkInstruction/WorkInstructionNodes/NodeActionMenu.razor

@@ -5,6 +5,7 @@
 
     @if (IsMenuOpen)
     {
+        <div class="dropdown-backdrop" @onclick="CloseDropdown"></div>
         <div class="dropdown-menu-custom">
             <button class="dropdown-item" @onclick="() => InvokeAction(Up)">Move Up</button>
             <button class="dropdown-item" @onclick="() => InvokeAction(Down)">Move Down</button>
@@ -42,6 +43,11 @@
         IsMenuOpen = !IsMenuOpen;
     }
 
+    private void CloseDropdown()
+    {
+        IsMenuOpen = false;
+    }
+
     private async Task InvokeAction(string action)
     {
         IsMenuOpen = false;

MESS/MESS.Blazor/Components/Pages/Phoebe/WorkInstruction/WorkInstructionNodes/NodeActionMenu.razor.css

@@ -3,6 +3,17 @@
     display: inline-block;
 }
 
+.dropdown-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    background-color: transparent;
+    cursor: default;
+}
+
 .dropdown-menu-custom {
     position: absolute;
     top: 100%;