MediaWiki:Common.js: Difference between revisions
Automated page publish |
added mobile nav toggle button |
||
| Line 816: | Line 816: | ||
selectTab('fishing'); | selectTab('fishing'); | ||
}); | }); | ||
// ========================================================================== | |||
// Mobile nav toggle — the sidebar (#mw-panel) renders inline far down the | |||
// page on narrow screens, so add a fixed hamburger button that slides it in | |||
// as an overlay drawer instead. CSS in Common.css keeps this hidden/inert | |||
// on desktop widths (>=1000px). | |||
// ========================================================================== | |||
(function () { | |||
function initMobileNav() { | |||
var panel = document.getElementById('mw-panel'); | |||
if (!panel || document.getElementById('mobile-nav-toggle')) return; | |||
var toggle = document.createElement('button'); | |||
toggle.id = 'mobile-nav-toggle'; | |||
toggle.type = 'button'; | |||
toggle.setAttribute('aria-label', 'Toggle navigation menu'); | |||
toggle.textContent = '\u2630 Menu'; | |||
var backdrop = document.createElement('div'); | |||
backdrop.id = 'mobile-nav-backdrop'; | |||
document.body.insertBefore(backdrop, document.body.firstChild); | |||
document.body.insertBefore(toggle, document.body.firstChild); | |||
function closeNav() { | |||
panel.classList.remove('mobile-nav-open'); | |||
backdrop.classList.remove('mobile-nav-open'); | |||
} | |||
function toggleNav() { | |||
panel.classList.toggle('mobile-nav-open'); | |||
backdrop.classList.toggle('mobile-nav-open'); | |||
} | |||
toggle.addEventListener('click', toggleNav); | |||
backdrop.addEventListener('click', closeNav); | |||
panel.querySelectorAll('a').forEach(function (a) { | |||
a.addEventListener('click', closeNav); | |||
}); | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', initMobileNav); | |||
} else { | |||
initMobileNav(); | |||
} | |||
})(); | |||