From 4ac3380218385879f292d62e19c548de1425dfab Mon Sep 17 00:00:00 2001
From: marijo <marijo@novosel.dk>
Date: Mon, 29 Jun 2026 08:14:50 +0000
Subject: [PATCH] Archive added

---
 app.js     | 23 +++++++++++++++++++++--
 styles.css |  9 +++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/app.js b/app.js
index 912a008..7266d35 100644
--- a/app.js
+++ b/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) {
diff --git a/styles.css b/styles.css
index a5bb226..35f8909 100644
--- a/styles.css
+++ b/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;