Implemented toggler logic for expanding / contracting sidebar

Any element with `data-sidebar-toggle` will trigger the expansion / contraction of the sidebar.

themes/grav/app/utils/mobile-sidebar.js

@@ -18,11 +18,13 @@ export default class MobileSidebar {
     enable() {
         this.matchMedia.addListener(this._getBound('checkMatch'));
         this.checkMatch(this.matchMedia);
+        $('body').on(EVENTS, '[data-sidebar-toggle]', this._getBound('toggleSidebarState'));
     }
 
     disable() {
         this.close();
         this.matchMedia.removeListener(this._getBound('checkMatch'));
+        $('body').off(EVENTS, '[data-sidebar-toggle]', this._getBound('toggleSidebarState'));
     }
 
     attach() {
@@ -35,21 +37,25 @@ export default class MobileSidebar {
 
     open(event) {
         event && event.preventDefault();
+        let overlay = $('#overlay');
+        let sidebar = $('#admin-sidebar');
 
-        $('#overlay').css('display', 'block');
+        overlay.css('display', 'block');
-        $('#admin-sidebar').css('display', 'block').animate({
+        sidebar.css('display', 'block').animate({
             opacity: 1
         }, 200, () => { this.isOpen = true; });
     }
 
     close(event) {
         event && event.preventDefault();
+        let overlay = $('#overlay');
+        let sidebar = $('#admin-sidebar');
 
-        $('#overlay').css('display', 'none');
+        overlay.css('display', 'none');
-        $('#admin-sidebar').animate({
+        sidebar.animate({
             opacity: 0
         }, 200, () => {
-            $('#admin-sidebar').css('display', 'none');
+            sidebar.css('display', 'none');
             this.isOpen = false;
         });
     }
@@ -59,6 +65,11 @@ export default class MobileSidebar {
         return this[this.isOpen ? 'close' : 'open'](event);
     }
 
+    toggleSidebarState() {
+        event && event.preventDefault();
+        $('body').toggleClass('sidebar-open');
+    }
+
     checkMatch(data) {
         let sidebar = $('#admin-sidebar');
         let overlay = $('#overlay');

themes/grav/templates/partials/nav.html.twig

@@ -1,5 +1,5 @@
 <nav id="admin-sidebar">
-    <div id="open-handle"><i class="fa fa-angle-double-right"></i></div>
+    <div id="open-handle" data-sidebar-toggle><i class="fa fa-angle-double-right"></i></div>
     <div id="admin-logo">
         {% include 'partials/logo.html.twig' %}
     </div>