added some stuff for new toggle

themes/grav/scss/template.scss

@@ -77,6 +77,9 @@
 // PHPInfo
 @import "template/phpinfo";
 
+// Nav Toggle
+@import "template/nav-toggle";
+
 // Custom
 @import "template/custom";
 

themes/grav/scss/template/_admin.scss

@@ -155,6 +155,10 @@ $sidebar-padding: 2rem;
         //transition: opacity 0.2s 0s, visibility 0s 0s
     }
 
+    @include breakpoint(mobile-only) {
+        z-index: 3;
+    }
+
     @include breakpoint(tablet-plus) {
         float: left;
         visibility: visible;
@@ -394,6 +398,7 @@ $sidebar-padding: 2rem;
         font-size: 1.5rem;
         text-align: left;
         letter-spacing: -1px;
+        line-height: 2;
     }
 
     .padding {
@@ -407,10 +412,17 @@ $sidebar-padding: 2rem;
         box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.1);
         z-index: 2;
 
-        @include breakpoint(mobile-only) {
-            height: 7.2rem;
-            margin-top: -5.5rem;
-            position: relative;
+
+        .lines-button {
+            display: none;
+            @extend %vertical-align;
+            background: rgba($black, 0.1);   // move this
+
+            @include breakpoint(mobile-only) {
+                display: inline-block;
+
+            }
+
         }
 
         .button-bar {
@@ -419,45 +431,12 @@ $sidebar-padding: 2rem;
 
         h1 {
             @extend %vertical-align;
-
-            @include breakpoint(mobile-only) {
-                > i:first-child:before {
-                   content: "\f0c9";
-                }
-                transform: inherit;
-                top: 5px;
-                font-size: 1.2rem;
-                display: block;
-                text-align: center;
-                padding: 20px 0px;
-                margin-top: -90px;
-                z-index: 2;
-            }
-
-            @media only all and (max-width: 374px) {
-                margin-top: -138px;
-            }
-
-            > .fa:first-child {
-                @include breakpoint(mobile-only) {
-                    cursor: pointer;
-                    float: left;
-                }
-            }
+            display: inline-block;
         }
 
         .button-bar {
             @extend %vertical-align;
             padding: 0;
-
-            @include breakpoint(mobile-only) {
-                text-align: center;
-                display: block;
-                float: none;
-                margin: 5rem -2rem 0px;
-                padding-top: 70px;
-            }
-
         }
 
         .preview {
@@ -467,11 +446,6 @@ $sidebar-padding: 2rem;
         .button {
             padding: 0.3rem 0.6rem;
 
-            @include breakpoint(mobile-only) {
-                padding: 0.2rem 0.5rem;
-                font-size: 0.9rem;
-            }
-
             i {
                 font-size: 13px;
             }

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

@@ -0,0 +1,71 @@
+$button-size : 2rem;
+$transition: .3s; // increase this to see the transformations in slow-motion
+
+$color: $white;
+
+@mixin line {
+    display: inline-block;
+    background: #fff;   // move this
+    width: $button-size;
+    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;
+    transition: .3s;
+    cursor: pointer;
+    user-select: none;
+    border-radius: $button-size/5;
+
+    background: transparent;    // move this
+
+    &:hover {
+        opacity: 1;
+    }
+
+    &:active {
+        transition: 0;
+        background: rgba(0,0,0,.1);     // move this
+    }
+}
+
+.lines {
+    position: relative;
+    @include line;
+
+    /*create the upper and lower lines as pseudo-elements of the middle line*/
+    &:before, &:after {
+
+        @include line;
+        position: absolute;
+        left:0;
+        content: '';
+        transform-origin: $button-size/14 center;
+    }
+    &:before { top: $button-size/4; }
+    &:after { top: -$button-size/4; }
+}
+
+.lines-button.x.close .lines{
+
+    /*hide the middle line*/
+    background: transparent;
+
+    /*overlay the lines by setting both their top values to 0*/
+    &:before, &:after{
+        transform-origin: 50% 50%;
+        top:0;
+        width: $button-size;
+    }
+
+    // rotate the lines to form the x shape
+    &:before{
+        transform: rotate3d(0,0,1,45deg);
+    }
+    &:after{
+        transform: rotate3d(0,0,1,-45deg);
+    }
+}

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

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

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

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