Added animation for toggler. Moved toggler outside of title and preserving it while the sidebar is open in mobile.

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

@@ -4,7 +4,7 @@ import Map from 'es6-map';
 const MOBILE_BREAKPOINT = 48 - 0.062;
 const DESKTOP_BREAKPOINT = 75 + 0.063;
 const EVENTS = 'touchstart._grav click._grav';
-const TARGETS = '#titlebar h1 > .fa, #overlay';
+const TARGETS = '[data-sidebar-mobile-toggle], #overlay';
 const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT}em)`;
 const DESKTOP_QUERY = `(min-width: ${DESKTOP_BREAKPOINT}em)`;
 
@@ -42,6 +42,7 @@ export default class MobileSidebar {
         let overlay = $('#overlay');
         let sidebar = $('#admin-sidebar');
 
+        $('body').addClass('sidebar-mobile-open');
         overlay.css('display', 'block');
         sidebar.css('display', 'block').animate({
             opacity: 1
@@ -53,6 +54,7 @@ export default class MobileSidebar {
         let overlay = $('#overlay');
         let sidebar = $('#admin-sidebar');
 
+        $('body').removeClass('sidebar-mobile-open');
         overlay.css('display', 'none');
         sidebar.animate({
             opacity: 0
@@ -72,12 +74,13 @@ export default class MobileSidebar {
         let body = $('body');
         let isDesktop = global.matchMedia(DESKTOP_QUERY).matches;
 
-        if (isDesktop && body.hasClass('sidebar-open')) {
+        if (isDesktop) {
             body.removeClass('sidebar-open');
         }
 
-        if (!isDesktop && body.hasClass('sidebar-closed')) {
+        if (!isDesktop) {
             body.removeClass('sidebar-closed');
+            body.removeClass('sidebar-mobile-open');
         }
 
         body.toggleClass(`sidebar-${isDesktop ? 'closed' : 'open'}`);

themes/grav/scss/template/_nav-toggle.scss

@@ -7,18 +7,21 @@ $color: $white;
     display: inline-block;
     background: #fff;   // move this
     width: $button-size;
-    height: $button-size/7;
-    border-radius: $button-size/14;
+    height: $button-size / 7;
+    border-radius: $button-size / 14;
     transition: $transition;
 }
 
 .lines-button {
     display: inline-block;
-    padding: $button-size/4 $button-size/4 $button-size/2;
+    padding: $button-size / 4 $button-size / 4 $button-size / 2;
     transition: .3s;
     cursor: pointer;
     user-select: none;
-    border-radius: $button-size/5;
+    border-radius: $button-size / 5;
+    position: absolute;
+    z-index: 5;
+    top: 10px;
 
     background: transparent;    // move this
 
@@ -28,7 +31,7 @@ $color: $white;
 
     &:active {
         transition: 0;
-        background: rgba(0,0,0,.1);     // move this
+        background: rgba(0, 0, 0, .1);     // move this
     }
 }
 
@@ -43,13 +46,13 @@ $color: $white;
         position: absolute;
         left:0;
         content: '';
-        transform-origin: $button-size/14 center;
+        transform-origin: $button-size / 14 center;
     }
-    &:before { top: $button-size/4; }
-    &:after { top: -$button-size/4; }
+    &:before { top: $button-size / 4; }
+    &:after { top: -$button-size / 4; }
 }
 
-.lines-button.x.close .lines{
+.sidebar-mobile-open .lines-button.x .lines {
 
     /*hide the middle line*/
     background: transparent;
@@ -63,9 +66,9 @@ $color: $white;
 
     // rotate the lines to form the x shape
     &:before{
-        transform: rotate3d(0,0,1,45deg);
+        transform: rotate3d(0, 0, 1, 45deg);
     }
     &:after{
-        transform: rotate3d(0,0,1,-45deg);
+        transform: rotate3d(0, 0, 1, -45deg);
     }
 }

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

@@ -39,8 +39,8 @@
         {% endblock %}
 
         <main id="admin-main" >
+            {% include 'partials/nav-toggle.html.twig' %}
             <div id="titlebar" class="titlebar">
-                {% include 'partials/nav-toggle.html.twig' %}
                 {% block titlebar %}{% endblock %}
             </div>
 

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

@@ -1,3 +1,3 @@
-<button class="lines-button x" type="button" role="button" aria-label="Toggle Navigation">
+<button class="lines-button x" type="button" role="button" aria-label="Toggle Navigation" data-sidebar-mobile-toggle>
     <span class="lines"></span>
 </button>