MediaWiki:Mobile.js: Difference between revisions

Newer edit →

@@ Line 13: / Line 13: @@
      }
    }
+});
+// Lightweight custom mobile hamburger + overlay menu
+mw.hook('wikipage.content').add(function () {
+  if (window.innerWidth > 800) return;
+  if (document.querySelector('.custom-mobile-hamburger')) return;
+  // Create hamburger button
+  var btn = document.createElement('button');
+  btn.className = 'custom-mobile-hamburger';
+  btn.setAttribute('aria-label', 'Open menu');
+  btn.innerHTML = '&#9776;'; // hamburger glyph
+  // Insert into header (try a few selectors)
+  var header = document.querySelector('.minerva-header') || document.querySelector('#mw-head') || document.body;
+  header.insertBefore(btn, header.firstChild);
+  // Create overlay
+  var overlay = document.createElement('div');
+  overlay.className = 'custom-mobile-overlay';
+  var panel = document.createElement('nav');
+  panel.className = 'custom-mobile-panel';
+  overlay.appendChild(panel);
+  // Close control
+  var close = document.createElement('div');
+  close.className = 'custom-mobile-close';
+  close.innerHTML = '<a href="#" aria-label="Close menu">✕</a>';
+  panel.appendChild(close);
+  // Menu links — mirror your MediaWiki:Mobile-menu entries
+  var links = [
+    { href: mw.util.getUrl('Main_Page'), label: 'Home' },
+    { href: mw.util.getUrl('Special:Search'), label: 'Search' },
+    { href: mw.util.getUrl('Recentchanges'), label: 'Recent changes' },
+    { href: mw.util.getUrl('Special:Random'), label: 'Random page' },
+    { href: mw.util.getUrl('Special:AllPages'), label: 'All pages' },
+    { href: mw.util.getUrl('Special:Categories'), label: 'Categories' },
+    { href: mw.util.getUrl('Special:Upload'), label: 'Upload file' }
+  ];
+  links.forEach(function (lnk) {
+    var a = document.createElement('a');
+    a.href = lnk.href;
+    a.textContent = lnk.label;
+    panel.appendChild(a);
+  });
+  document.body.appendChild(overlay);
+  function openMenu() {
+    overlay.style.display = 'flex';
+    document.body.style.overflow = 'hidden';
+    btn.setAttribute('aria-expanded', 'true');
+  }
+  function closeMenu() {
+    overlay.style.display = 'none';
+    document.body.style.overflow = '';
+    btn.setAttribute('aria-expanded', 'false');
+  }
+  btn.addEventListener('click', function (e) {
+    e.preventDefault();
+    openMenu();
+  });
+  overlay.addEventListener('click', function (e) {
+    if (e.target === overlay) closeMenu();
+  });
+  close.addEventListener('click', function (e) {
+    e.preventDefault();
+    closeMenu();
+  });
 });