https://narrowin.com/assets/mobile-nav.js

1(function () {
2  function init() {
3    var nav = document.querySelector('.nav');
4    if (!nav) return;
5    var navIn = nav.querySelector('.nav-in');
6    var links = nav.querySelector('.nav-links');
7    if (!navIn || !links) return;
8    if (nav.querySelector('.nav-burger')) return; // idempotent
9
10    if (!links.id) links.id = 'nav-links';
11    var host = nav.querySelector('.nav-right') || navIn;
12
13    var btn = document.createElement('button');
14    btn.type = 'button';
15    btn.className = 'nav-burger';
16    btn.setAttribute('aria-label', 'Toggle menu');
17    btn.setAttribute('aria-controls', links.id);
18    btn.setAttribute('aria-expanded', 'false');
19    btn.innerHTML = '<span></span><span></span><span></span>';
20    host.appendChild(btn);
21
22    function setOpen(open) {
23      nav.classList.toggle('nav-open', open);
24      btn.classList.toggle('is-open', open);
25      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
26    }
27
28    btn.addEventListener('click', function (e) {
29      e.stopPropagation();
30      setOpen(!nav.classList.contains('nav-open'));
31    });
32
33    // close after a destination is chosen
34    links.addEventListener('click', function (e) {
35      if (e.target.closest('a')) setOpen(false);
36    });
37
38    // close on outside tap / Escape
39    document.addEventListener('click', function (e) {
40      if (nav.classList.contains('nav-open') && !nav.contains(e.target)) setOpen(false);
41    });
42    document.addEventListener('keydown', function (e) {
43      if (e.key === 'Escape' || e.keyCode === 27) setOpen(false);
44    });
45
46    // reset when returning to desktop width
47    var mq = window.matchMedia('(min-width: 881px)');
48    function onChange() { if (mq.matches) setOpen(false); }
49    if (mq.addEventListener) mq.addEventListener('change', onChange);
50    else if (mq.addListener) mq.addListener(onChange);
51  }
52
53  if (document.readyState === 'loading') {
54    document.addEventListener('DOMContentLoaded', init);
55  } else {
56    init();
57  }
58})();