Archive added

app.js

@@ -41,6 +41,7 @@ routesList.addEventListener("click", handleRouteAction);
 archivedRoutesList.addEventListener("click", handleRouteAction);
 document.addEventListener("click", closeMenusOnOutsideClick);
 document.addEventListener("keydown", closeMenusOnEscape);
+document.addEventListener("toggle", markOpenMenuCard, true);
 
 if (sessionStorage.getItem(AUTH_SESSION_KEY) === "yes") {
   unlockApp();
@@ -224,8 +225,26 @@ function closeMenusOnEscape(event) {
   }
 }
 
-function closeRouteMenus() {
-  document.querySelectorAll(".route-menu[open]").forEach((menu) => menu.removeAttribute("open"));
+function closeRouteMenus(exceptMenu) {
+  document.querySelectorAll(".route-menu[open]").forEach((menu) => {
+    if (menu !== exceptMenu) {
+      menu.removeAttribute("open");
+      menu.closest(".route-card")?.classList.remove("menu-open");
+    }
+  });
+}
+
+function markOpenMenuCard(event) {
+  const menu = event.target.closest?.(".route-menu");
+  if (!menu) {
+    return;
+  }
+
+  if (menu.open) {
+    closeRouteMenus(menu);
+  }
+
+  menu.closest(".route-card")?.classList.toggle("menu-open", menu.open);
 }
 
 function handleRouteAction(event) {

styles.css

@@ -222,9 +222,14 @@ textarea:focus {
 }
 
 .route-card {
+  position: relative;
   overflow: visible;
 }
 
+.route-card.menu-open {
+  z-index: 100;
+}
+
 .route-image {
   min-height: 130px;
   background-position: center;
@@ -356,6 +361,10 @@ textarea:focus {
   opacity: 0.82;
 }
 
+.archived-routes-list .route-card.menu-open {
+  opacity: 1;
+}
+
 .empty-state {
   padding: 1.5rem 1rem;
   text-align: center;