Re-jigged nav JS and add parallax

- Clicking the content closes the nav
- Content overlays the nav to create a parallax effect
- Clicking the burger works now

ghost/admin/assets/sass/components/navigation.scss

@@ -152,8 +152,9 @@
         background: darken($darkgrey, 7%);
         overflow: auto;
         -webkit-overflow-scrolling: touch;
-        @include transform(translate3d(-260px, 0px, 0px));
+
-        @include transition(transform 0.15s ease-in-out);
+        @include transform(translate3d(-60px, 0px, 0px)); // Not off the screen, to give a parallax effect
+        @include transition(transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1));
 
         .thing, .thing2 {
             display: block;

ghost/admin/assets/sass/layouts/default.scss

@@ -18,7 +18,7 @@
     z-index: 500; // Above the .global-nav when collapsed
 
     @media (max-width: 1025px) {
-        @include transition(transform 0.15s ease-in-out);
+        @include transition(transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1));
     }
 
     &.global-nav-expanded {
@@ -90,6 +90,7 @@
     @include position(absolute, 60px 0px 0px 0px);
     background: #fff;
     overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
 
     @media (max-width: 1025px) {
         top: 44px;

ghost/admin/docs/js/nav.js

@@ -1,23 +1,49 @@
 (function(){
 
-    if (matchMedia) {
+    // TODO: unbind click events when nav is desktop sized
-        var mq_max_1025 = window.matchMedia("(max-width: 1025px)");
+
-        mq_max_1025.addListener(show_hide_nav);
+    // Element vars
-        show_hide_nav(mq_max_1025);
+    var menu_button = document.querySelector(".menu-button"),
-    }
+        viewport = document.querySelector(".viewport"),
+        global_nav = document.querySelector(".global-nav"),
+        page_content = document.querySelector(".viewport .page-content");
+
+    // mediaQuery listener
+    var mq_max_1025 = window.matchMedia("(max-width: 1025px)");
+    mq_max_1025.addListener(show_hide_nav);
+    show_hide_nav(mq_max_1025);
+
+    menu_button.addEventListener("click", function(e) {
+        e.preventDefault();
+        if (menu_button.getAttribute('data-nav-open')) {
+            close_nav();
+        } else {
+            open_nav();
+        }
+    });
+
+    page_content.addEventListener("click", function(e) {
+        e.preventDefault();
+        console.log("click viewport");
+        if (viewport.classList.contains("global-nav-expanded")) {
+            console.log("close nav from viewport");
+            close_nav();
+        }
+    });
+
+    var open_nav = function(){
+        menu_button.setAttribute("data-nav-open", "true");
+        viewport.classList.add("global-nav-expanded");
+        global_nav.classList.add("global-nav-expanded");
+    };
+
+    var close_nav = function(){
+        menu_button.removeAttribute('data-nav-open');
+        viewport.classList.remove("global-nav-expanded");
+        global_nav.classList.remove("global-nav-expanded");
+    };
 
     function show_hide_nav(mq) {
-
-        var viewport = document.querySelector(".viewport"),
-            global_nav = document.querySelector(".global-nav"),
-            menu_button = document.querySelector(".menu-button");
-
-        menu_button.addEventListener("click", function(e) {
-            e.preventDefault();
-            viewport.classList.toggle("global-nav-expanded");
-            global_nav.classList.toggle("global-nav-expanded");
-        });
-
         if (mq.matches) {
             // Window is 1025px or less
         } else {