when in menu, do not allow clicking all around

ht_booking/assets/views/base.html

@@ -66,6 +66,21 @@
         max-width: calc(100vw - 1rem);
       }
     }
+
+    /* Mobile: a backdrop behind an open navbar dropdown. It absorbs taps
+       outside the menu — closing the dropdown rather than letting the tap
+       reach the page — and dims the page to show the menu is modal. It sits
+       below the dropdown content (z-50) so the menu items stay tappable. */
+    #nav-backdrop { display: none; }
+    @media (max-width: 767px) {
+      #nav-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: 40;
+        background-color: rgba(0, 0, 0, 0.25);
+      }
+      #nav-backdrop.nav-backdrop--on { display: block; }
+    }
   </style>
   {% block head %}{% endblock head %}
 </head>
@@ -206,6 +221,8 @@
     </div>
   </div>
 
+  <div id="nav-backdrop" aria-hidden="true"></div>
+
   <main class="mx-auto max-w-6xl px-4 py-6">
     {% block content %}{% endblock content %}
   </main>
@@ -215,6 +232,32 @@
       document.cookie = 'lang=' + l + ';path=/;max-age=31536000';
       location.reload();
     }
+
+    // Mobile: while a navbar dropdown is open, a full-screen backdrop covers
+    // the page so a tap outside the menu only closes it, instead of also
+    // activating whatever sat underneath. Preventing the backdrop's mousedown
+    // keeps the trigger focused (menu open) until the tap's click lands on the
+    // backdrop itself, which then blurs the trigger to close the menu.
+    (function () {
+      var backdrop = document.getElementById('nav-backdrop');
+      if (!backdrop) return;
+      var hide = function () { backdrop.classList.remove('nav-backdrop--on'); };
+      document.querySelectorAll('.navbar .dropdown').forEach(function (dd) {
+        dd.addEventListener('focusin', function () {
+          backdrop.classList.add('nav-backdrop--on');
+        });
+        dd.addEventListener('focusout', function (e) {
+          if (!dd.contains(e.relatedTarget)) hide();
+        });
+      });
+      backdrop.addEventListener('mousedown', function (e) { e.preventDefault(); });
+      backdrop.addEventListener('click', function () {
+        if (document.activeElement && document.activeElement.blur) {
+          document.activeElement.blur();
+        }
+        hide();
+      });
+    })();
   </script>
   {% block js %}{% endblock js %}
 </body>