diff --git a/index.html b/index.html
index d2604fe..0c26bc8 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Chandler Swift's Maps</title>
   </head>
-  <body>
+  <body class="nav-open">
     <noscript>Sorry, but you'll need JavaScript enabled for any of this to work!</noscript>
     <aside>
       <h1>Chandler's Maps</h1>
diff --git a/main.js b/main.js
index 92cd4ef..2a6494a 100644
--- a/main.js
+++ b/main.js
@@ -1,10 +1,14 @@
 import './style.css';
 import {Map, View} from 'ol';
-import {fromLonLat} from 'ol/proj.js';
+import {fromLonLat, get} from 'ol/proj.js';
+import {defaults as defaultControls} from 'ol/control.js';
+
+import ToggleMenuControl from './ui/controls.js';
 
 import layerCategories from './layers/index.js';
 
 const map = new Map({
+  controls: defaultControls().extend([new ToggleMenuControl()]),
   target: 'map',
   layers: [],
   view: new View({
diff --git a/style.css b/style.css
index f4373d4..0916467 100644
--- a/style.css
+++ b/style.css
@@ -4,17 +4,29 @@ html, body {
   margin: 0;
   height: 100%;
 }
+
 #map {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: min(max(200px, 20%), 400px);
+  left: 0;
   right: 0;
+  transition: 0.25s;
+}
+
+.nav-open #map {
+  left: min(max(200px, 20%), 400px);
 }
 
 aside {
   width: min(max(200px, 20%), 400px);
+  margin-left: max(min(-200px, -20%), -400px);
   padding: 0 1em;
+  transition: 0.25s;
+}
+
+.nav-open aside {
+  margin-left: 0;
 }
 
 aside ul {
diff --git a/ui/controls.css b/ui/controls.css
new file mode 100644
index 0000000..5db57b6
--- /dev/null
+++ b/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 */
+}
diff --git a/ui/controls.js b/ui/controls.js
new file mode 100644
index 0000000..6af8468
--- /dev/null
+++ b/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);
+    }
+}
