From 418c2375e799419280c5c43a7610cce08cd6784a Mon Sep 17 00:00:00 2001
From: Greg <trystuffwospam@livingonlinenow.com>
Date: Sat, 10 May 2025 18:17:41 +0200
Subject: [PATCH] Top menu with show options V4

---
 static/app.js        | 18 ++++++++++++------
 templates/index.html |  5 +----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/static/app.js b/static/app.js
index 74a1acd..eaefb61 100644
--- a/static/app.js
+++ b/static/app.js
@@ -214,12 +214,18 @@ window.onload = () => {
         }
 
         if (dropdown && dropdownContent && showMenuBtn) {
-            dropdown.addEventListener('mouseenter', openMenu);
-            dropdown.addEventListener('mouseleave', closeMenu);
-            showMenuBtn.addEventListener('focus', openMenu);
-            showMenuBtn.addEventListener('blur', closeMenu);
+            showMenuBtn.onclick = (e) => {
+                e.stopPropagation();
+                dropdown.classList.toggle('open');
+            };
+            // Close menu when clicking elsewhere
+            document.addEventListener('click', (e) => {
+                if (!dropdown.contains(e.target)) {
+                    dropdown.classList.remove('open');
+                }
+            });
         }
-        if (showAll) showAll.onclick = () => { matchViewMode = 'all'; renderTable(); closeMenu(); };
-        if (showFuture) showFuture.onclick = () => { matchViewMode = 'future'; renderTable(); closeMenu(); };
+        if (showAll) showAll.onclick = () => { matchViewMode = 'all'; renderTable(); if (dropdown) dropdown.classList.remove('open'); };
+        if (showFuture) showFuture.onclick = () => { matchViewMode = 'future'; renderTable(); if (dropdown) dropdown.classList.remove('open'); };
     });
 };
diff --git a/templates/index.html b/templates/index.html
index 706a499..3fe3a38 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -66,10 +66,7 @@
             border-radius: 4px;
             z-index: 10;
         }
-        .menu-bar .dropdown:hover .dropdown-content,
-        .menu-bar .dropdown:focus-within .dropdown-content,
-        .menu-bar .dropdown .dropdown-content:focus,
-        .menu-bar .dropdown .dropdown-content:active {
+        .menu-bar .dropdown.open .dropdown-content {
             opacity: 1;
             visibility: visible;
             pointer-events: auto;