Inject menu button for hearted nodes

public/assets/enhancements.js

@@ -138,24 +138,37 @@
         cb(favouriteNodes.heartEl);
       });
       xhr.send();
-    }
+    },
-  };
 
-  // Init favourite nodes
+    // Initiate node favouriting
-  if(supports.test(['localStorage', 'inlineSVG', 'querySelector', 'classList'])) {
+    init: function() {
 
-    // Start loading heart SVG before DOM
+      // Start loading heart SVG before DOM
-    favouriteNodes.loadSVG(function(heartEl) {
+      favouriteNodes.loadSVG(function(heartEl) {
 
-      // Then inject into DOM when it's ready
+        // Then inject into DOM when it's ready
+        DOMReady(function() {
+          var titleEl = document.querySelector('h2.node-title');
+          if(titleEl) {
+            titleEl.insertBefore(heartEl, titleEl.firstChild);
+          }
+        });
+      });
+
+      // Inject menu button into DOM
       DOMReady(function() {
-        var titleEl = document.querySelector('h2.node-title');
+        var menuButton = document.createElement('div');
-        if(titleEl) {
+        menuButton.classList.add('menu');
-          titleEl.insertBefore(heartEl, titleEl.firstChild);
+        menuButton.innerHTML = '☰';
-        }
+        menuButton.style.height = document.querySelector('.title').offsetHeight + 'px';
+        document.querySelector('header .wrapper').appendChild(menuButton);
       });
-    });
+    }
+  };
 
+  // Init favourite nodes
+  if(supports.test(['localStorage', 'inlineSVG', 'querySelector', 'classList'])) {
+    favouriteNodes.init();
   }
 
   // Add ios class to body on iOS devices

public/assets/style.css

@@ -110,6 +110,16 @@ h1 {
   outline: 0;
 }
 
+.menu {
+  width: 4rem;
+  border-right: 1px solid #eee;
+  text-align: center;
+  line-height: 1.1em;
+  font-size: 3em;
+  color: #b24592;
+  cursor: pointer;
+}
+
 /* Main */
 main {
   padding-top: 5.6em;
@@ -399,7 +409,7 @@ footer {
 /* Small Mobile */
 @media (max-width: 500px) {
 
-  /* Center title and move searchbar below */
+  /* Move searchbar below title */
   header {
     position: static;
   }
@@ -412,7 +422,7 @@ footer {
     top: 0;
     left: 0;
     width: 100%;
-    text-align: center;
+    padding-left: 1em;
     background: #fff;
     box-shadow: 0px 3px #eaeaea;
   }
@@ -433,6 +443,13 @@ footer {
     font-size: 20px;
     padding: 0.4em 0.2em;
   }
+  .menu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    border-left: 1px solid #eee;
+  }
   main {
     padding-top: 8.5em;
   }