From 77941275ed889bc98417aa6f57efb52907be6b93 Mon Sep 17 00:00:00 2001
From: Matt Enlow <matt@novaugust.net>
Date: Mon, 7 Jul 2014 08:55:22 -0600
Subject: [PATCH] Fix mobile sidebar menu

Closes #3110
- Created `ApplicationView`
- Added `js-close-sidebar` classes to navbar navigation links
- Clicking on a navigation link in the sidebar will close it
---
 core/client/routes/application.js | 13 -------------
 core/client/templates/-navbar.hbs |  6 +++---
 core/client/utils/mobile-utils.js |  2 +-
 core/client/views/application.js  | 20 ++++++++++++++++++++
 4 files changed, 24 insertions(+), 17 deletions(-)
 create mode 100644 core/client/views/application.js

diff --git a/core/client/routes/application.js b/core/client/routes/application.js
index be5d8703f5..6e24038f29 100644
--- a/core/client/routes/application.js
+++ b/core/client/routes/application.js
@@ -1,23 +1,10 @@
 import ShortcutsRoute from 'ghost/mixins/shortcuts-route';
-import mobileUtils from 'ghost/utils/mobile-utils';
 
 var ApplicationRoute = Ember.Route.extend(Ember.SimpleAuth.ApplicationRouteMixin, ShortcutsRoute, {
 
     shortcuts: {
         'esc': 'closePopups'
     },
-    mobileInteractions: function () {
-        var responsiveAction = mobileUtils.responsiveAction;
-
-        Ember.run.scheduleOnce('afterRender', document, function () {
-            // ### Toggle the sidebar menu
-            $('[data-off-canvas]').on('click', function (event) {
-                responsiveAction(event, '(max-width: 650px)', function () {
-                    $('body').toggleClass('off-canvas');
-                });
-            });
-        });
-    }.on('init'),
 
     setupController: function () {
         Ember.run.next(this, function () {
diff --git a/core/client/templates/-navbar.hbs b/core/client/templates/-navbar.hbs
index 73451979ec..3a2d3dc9fd 100644
--- a/core/client/templates/-navbar.hbs
+++ b/core/client/templates/-navbar.hbs
@@ -4,9 +4,9 @@
     </a>
     <nav id="global-nav" role="navigation">
         <ul id="main-menu" >
-            {{gh-activating-list-item route="posts" title="Content" classNames="content"}}
-            {{gh-activating-list-item route="editor.new" title="New Post" classNames="editor"}}
-            {{gh-activating-list-item route="settings" title="Settings" classNames="settings"}}
+            {{gh-activating-list-item route="posts" title="Content" classNames="content js-close-sidebar"}}
+            {{gh-activating-list-item route="editor.new" title="New Post" classNames="editor js-close-sidebar"}}
+            {{gh-activating-list-item route="settings" title="Settings" classNames="settings js-close-sidebar"}}
 
             <li id="usermenu" class="usermenu subnav">
                 {{#gh-popover-button popoverName="user-menu" tagName="a" href="#" classNames="dropdown"}}
diff --git a/core/client/utils/mobile-utils.js b/core/client/utils/mobile-utils.js
index 2fd658aadc..f384e310f4 100644
--- a/core/client/utils/mobile-utils.js
+++ b/core/client/utils/mobile-utils.js
@@ -39,7 +39,7 @@ responsiveAction = function responsiveAction(event, mediaCondition, cb) {
     cb();
 };
 
-export { hasTouchScreen, smallScreen };
+export { hasTouchScreen, smallScreen, responsiveAction };
 export default {
     hasTouchScreen: hasTouchScreen,
     smallScreen: smallScreen,
diff --git a/core/client/views/application.js b/core/client/views/application.js
new file mode 100644
index 0000000000..1d0151fc02
--- /dev/null
+++ b/core/client/views/application.js
@@ -0,0 +1,20 @@
+import {responsiveAction} from 'ghost/utils/mobile-utils';
+
+var ApplicationView = Ember.View.extend({
+
+    mobileInteractions: function () {
+        var body = $('body');
+        // ### Toggle the mobile sidebar menu
+        $('[data-off-canvas]').on('click', function (event) {
+            responsiveAction(event, '(max-width: 650px)', function () {
+                body.toggleClass('off-canvas');
+            });
+        });
+        // #### Navigating within the sidebar closes it.
+        $('.js-close-sidebar').on('click', function () {
+            body.removeClass('off-canvas');
+        });
+    }.on('didInsertElement')
+});
+
+export default ApplicationView;