Make menu off-canvas

ui/controls.css

@@ -0,0 +1,14 @@
+.show-menu {
+    top: .5em;
+    left: .5em;
+}
+.ol-zoom {
+    top: calc(1.375em + 2 * 0.5em);
+}
+
+.ol-touch .show-menu {
+    top: .5em; /* TODO */
+}
+.ol-touch .ol-zoom {
+    top: calc(1.375em * 1.5 + 2 * 0.5em); /* menu button at 1.5x scale, plus 2x padding */
+}

ui/controls.js

@@ -0,0 +1,28 @@
+// https://openlayers.org/en/latest/examples/custom-controls.html
+
+import {Control} from 'ol/control.js';
+
+import './controls.css'
+
+export default class ToggleMenuControl extends Control {
+    /**
+     * @param {Object} [opt_options] Control options.
+     */
+    constructor(opt_options) {
+        const options = opt_options || {};
+
+        const button = document.createElement('button');
+        button.innerHTML = '≡';
+
+        const element = document.createElement('div');
+        element.className = 'show-menu ol-unselectable ol-control';
+        element.appendChild(button);
+
+        super({
+            element: element,
+            target: options.target,
+        });
+
+        button.addEventListener('click', () => document.body.classList.toggle("nav-open"), false);
+    }
+}