drawer menu scrollable

assets/sass/components/_drawer.scss

@@ -4,7 +4,7 @@
   left: -100%;
   z-index: z('drawer');
   width: $drawer-width;
-  height: 100vh;
+  height: 100%;
 
   @include themify($themes) {
     background-color: themed('body-background-color');
@@ -32,8 +32,9 @@
   }
 
   &__body {
-    height: calc(100vh - $grid-nav-height);
+    height: 100%;
     width: 100%;
+    overflow-y: auto;
   }
 
   &__close {

assets/sass/components/_menu.scss

@@ -10,6 +10,10 @@
   overflow-y: auto;
   z-index: z('menu');
 
+  @media only screen and (max-width: 600px) {
+    top: 0;
+  }
+
   &__label {
     font-family: $title-font;
     font-size: 1rem;

assets/sass/components/_modal.scss

@@ -8,7 +8,7 @@
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: hidden;
-  opacity: 1;
+  opacity: 0;
   background: rgba(0,0,0,0.6);
 
   @include transition(opacity, 0.25s, ease-in-out);

layouts/partials/head/scripts.html

@@ -93,8 +93,8 @@
       modal.style.left = 0;
       modal.style.opacity = 1;
       drawer.style.left = 0;
-      drawer.style.transition = "left 0.3s ease-out";
-      drawer.style.webkitTransition = "left 0.3s ease-out";
+      drawer.style.transition = "left 0.3s ease-out, opacity 0.2s ease-out";
+      drawer.style.webkitTransition = "left 0.3s ease-out, opacity 0.2s ease-out";
     }
 
     var closeDrawer = function() {