From 11db75ba1b0b5380638800762eb94d8397d3f556 Mon Sep 17 00:00:00 2001 From: Artem Ryabkov Date: Wed, 29 Oct 2025 22:53:43 +0400 Subject: [PATCH] Fixed dropdown menus in navbar not working on touch devices --- static/site/js/touch-interface-dropdown.js | 33 ++++++++++++++++++++++ templates/base.html | 4 ++- 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 static/site/js/touch-interface-dropdown.js diff --git a/static/site/js/touch-interface-dropdown.js b/static/site/js/touch-interface-dropdown.js new file mode 100644 index 00000000..35504c5a --- /dev/null +++ b/static/site/js/touch-interface-dropdown.js @@ -0,0 +1,33 @@ +document.addEventListener('DOMContentLoaded', function () { + // check if touch device, return if not + const isTouchDevice = matchMedia('(hover: none)').matches; + + if (!isTouchDevice) return; + + // Find all hoverable dropdowns and disable hover for them + const dropdowns = document.querySelectorAll('.navbar-item.has-dropdown.is-hoverable'); + + dropdowns.forEach(dropdown => { + dropdown.classList.remove('is-hoverable'); + + const link = dropdown.querySelector('.navbar-link'); + + // Toggle dropdown on touch and close all other dropdowns + link.addEventListener('click', function (event) { + event.preventDefault(); + + dropdowns.forEach(d => { + if (d !== dropdown) d.classList.remove('is-active'); + }); + + dropdown.classList.toggle('is-active'); + }); + }); + + // If touched anywhere else, close all dropdowns + document.addEventListener('click', function (event) { + if (!event.target.closest('.navbar-item.has-dropdown')) { + dropdowns.forEach(d => d.classList.remove('is-active')); + } + }); +}); \ No newline at end of file diff --git a/templates/base.html b/templates/base.html index b3fbceb0..afb768e7 100644 --- a/templates/base.html +++ b/templates/base.html @@ -37,7 +37,9 @@ {% block headcss %}{% endblock %} {# Head Scripts #} - {% block headscripts %}{% endblock %} + {% block headscripts %} + + {% endblock %} {# Navigation #}