Simplified menu logic and fixed errors.

README.md

@@ -1,4 +1,4 @@
-# [![WikiPadia](http://res.cloudinary.com/rowanhogan/image/upload/c_scale,w_240/v1442544833/logo_sadlam.png)](http://wikipadia.xyz)
+# [![WikiPadia](https://res.cloudinary.com/rowanhogan/image/upload/c_scale,w_400/v1442937094/logo-01_indiff.png)](http://wikipadia.xyz)
 
 _WikiPadia_ is a beautiful, customisable Wikipedia reader. It was specifically built for leisurely, late-night reading on an iPad.
 

app/index.html

@@ -56,7 +56,7 @@ <h3>Options</h3>
 
   <div class="container push">
     <div id="content">
-      <h1 class='logo'>Wik<em>i<span>P</span>adia</em></h1>
+      <h1 class='logo'>Wik<em>i<span>P</span>ad</em>ia</h1>
 
       <form class="search-form" type="POST">
         <input type='search' placeholder="Search to get started...">

app/scripts/app.js

@@ -1,6 +1,5 @@
 
-var $ = require('jquery');
-var bigSlide = require('../../node_modules/bigslide/dist/bigSlide.js');
+var attachFastClick = require('fastclick');
 var handleNewPage = require('./components/handleNewPage');
 var handleTheme = require('./components/handleTheme');
 var eventHandlers = require('./components/eventHandlers')
@@ -11,7 +10,9 @@ if (window.location.hostname.split('.').length > 2) {
   var lang = 'en';
 }
 
-$(function() {
+(function() {
+  attachFastClick(document.body);
+
   var htmlEl = document.body.parentElement;
 
   if (window.location.search.length) {
@@ -29,12 +30,8 @@ $(function() {
 
   if (localStorage.getItem('customStyles')) {
     var styles = localStorage.getItem('customStyles');
-    document.getElementById('custom-styles').innerHTML(styles);
+    document.getElementById('custom-styles').innerHTML = styles;
     document.getElementById('custom-styles-input').value = styles;
   }
 
-  $('.menu-link').bigSlide({
-    side: 'right',
-    menuWidth: '22em'
-  });
-});
+})();

app/scripts/components/eventHandlers.js

@@ -21,3 +21,12 @@ $(document).on('change', '#theme-changer', function(e) {
   var theme = $(this).val();
   handleTheme(theme);
 });
+
+$(document).on('click', '#menu-toggle', function(e) {
+  e.preventDefault();
+
+  $(this).toggleClass('active');
+  $('body').toggleClass('sidebar-active');
+});
+
+

app/styles/_app.scss

@@ -1,4 +1,3 @@
-
 .logo {
   margin: .5em 0 .75em;
   line-height: 1em;
@@ -17,7 +16,6 @@
     color: #222;
     font-style: normal;
   }
-
 }
 
 input, textarea, button, select {
@@ -130,6 +128,14 @@ textarea {
   z-index: 100;
   max-width: 100%;
   overflow: auto;
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: $sidebar-width;
+  max-width: 100%;
+  transform: translateX($sidebar-width);
 
   h3 {
     margin-top: 0;
@@ -162,6 +168,24 @@ textarea {
   input, button, select {
     border: 0;
   }
+
+  @media screen {
+    display: block;
+  }
+}
+
+#menu, .push {
+  transition: transform 300ms ease;
+}
+
+.sidebar-active {
+  #menu {
+    transform: translateX(0);
+  }
+
+  .push {
+    transform: translateX(-#{$sidebar-width});
+  }
 }
 
 .search-form {

app/styles/style.scss

@@ -2,6 +2,8 @@
 $serif-stack: "Cardo", "Crimson Text", "PT Serif", "Lora", serif;
 $sans-stack: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 
+$sidebar-width: 18em;
+
 @import "default";
 @import "content";
 @import "app";

package.json

@@ -31,7 +31,6 @@
     "vinyl-source-stream": "^1.1.0"
   },
   "dependencies": {
-    "bigslide": "^0.9.1",
     "fastclick": "^1.0.6",
     "jquery": "^2.1.4"
   }