feat: Improve dropdown menu handling and visibility for OTS-specific menus

This commit is contained in:
Matt Batchelder
2026-02-07 00:48:41 -05:00
parent edd112fec3
commit 1c5c23f100
5 changed files with 197 additions and 132 deletions

View File

@@ -306,10 +306,13 @@
* Initialize dropdown menus
*/
function initDropdowns() {
const dropdowns = document.querySelectorAll('.dropdown');
// Only handle OTS-specific dropdowns (user menu, notifications).
// Let Bootstrap handle topbar nav dropdowns (Schedule, Design, etc.) natively
// so that links like Dayparting can navigate normally.
const otsDropdowns = document.querySelectorAll('.ots-topbar-action .dropdown, .ots-page-actions .dropdown');
dropdowns.forEach(dropdown => {
const toggle = dropdown.querySelector('.dropdown-toggle, [data-toggle="dropdown"], .dt-button');
otsDropdowns.forEach(dropdown => {
const toggle = dropdown.querySelector('.dropdown-toggle, [data-toggle="dropdown"]');
const menu = dropdown.querySelector('.dropdown-menu');
if (!toggle || !menu) return;
@@ -318,7 +321,12 @@
toggle.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
dropdown.classList.toggle('active');
const isNowActive = dropdown.classList.toggle('active');
// Close other OTS dropdowns
otsDropdowns.forEach(other => {
if (other !== dropdown) other.classList.remove('active');
});
});
// Close menu when clicking outside