add back mdb-drawer-out to force closed.

docs/examples/dashboard/example.js

@@ -29,14 +29,17 @@ $(document).ready(function() { // document ready is a little convoluted because
     // once clicked, just do away with responsive marker
     //$container.removeClass('mdb-drawer-in-md')
 
-    var $icon = $(this).find('.material-icons')
+    var $btn = $(this)
+    var $icon = $btn.find('.material-icons')
     if ($icon.text() == 'visibility_off') {
-      $container.removeClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it close
+      $container.addClass('mdb-drawer-out') // demo only, regardless of the responsive class, we want to force it close
       $icon.text('visibility')
+      $btn.attr('title', 'Drawer allow responsive opening')
     }
     else {
-      $container.addClass('mdb-drawer-in') // demo only, regardless of the responsive class, we want to force it open
+      $container.removeClass('mdb-drawer-out') // demo only, regardless of the responsive class, we want to force it open
       $icon.text('visibility_off')
+      $btn.attr('title', 'Drawer force closed')
     }
   })
 })

docs/examples/dashboard/index.html

@@ -29,9 +29,9 @@ js: example.js
             Home
           </li>
         </ul>
-        <ul class="nav navbar-nav pull-right">
+        <ul class="nav navbar-nav pull-xs-right">
           <li class="nav-item">
-            <button class="btn mdb-btn-icon" title="Drawer toggle" id="drawer-visibility">
+            <button class="btn mdb-btn-icon" title="Drawer force close" id="drawer-visibility">
               <i class="material-icons">visibility_off</i>
             </button>
           </li>
@@ -58,7 +58,7 @@ js: example.js
 
 
           <li class="nav-item">
-            <div class="mdb-form-group mdb-collapse-inline pull-right">
+            <div class="mdb-form-group mdb-collapse-inline pull-xs-right">
               <button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-controls="collapse-search">
                 <i class="material-icons">search</i>
               </button>

scss/_drawer.scss

@@ -53,6 +53,9 @@
 //
 //  NOTE: mdb-drawer-in-* uses media-breakpoint-up()
 //
+// mdb-drawer-out
+//  A marker class that will _force_ the drawer closed regardless of the responsive class present. If (for some
+//  strange reason) both mdb-drawer-out and mdb-drawer-in are present, it appears that the closed option wins.
 //
 // mdb-drawer-overlay, mdb-drawer-overlay-sm, mdb-drawer-overlay-md, mdb-drawer-overlay-lg
 //  We iterate over the standard grid breakpoints, but we also need styles for the simpler `mdb-drawer-overlay`.
@@ -63,23 +66,23 @@
 
 //
 // Drawer open positioning, and style options (push is default, overlay is optional)
-//  - first eliminate positioning or sizing rules if the drawer is already forced closed (which is the default behavior above)
+:not(.mdb-drawer-out) { // first eliminate positioning or sizing rules if the drawer is already forced closed
-@each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map-keys($grid-breakpoints) {
 
-  @include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
+    @include mdb-drawer-x-open-up($mdb-layout-drawer-x-size, $breakpoint);
-  @include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint);
+    @include mdb-drawer-y-open-up($mdb-layout-drawer-y-size, $breakpoint);
 
-  @include mdb-drawer-x-overlay-down($breakpoint);
+    @include mdb-drawer-x-overlay-down($breakpoint);
-  @include mdb-drawer-y-overlay-down($breakpoint);
+    @include mdb-drawer-y-overlay-down($breakpoint);
+  }
 }
 
-
 //----
 // Example 1: creates a media responsive kitchen-sink-drawer that pairs with mdb-drawer-in-lg and allows for the mdb-drawer-in trigger
 //
 // Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
 //
-//.kitchen-sink-drawer {
+//.kitchen-sink-drawer:not(.mdb-drawer-out) {
 //  @each $breakpoint in (xs lg) {
 //    // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay
 //    @include mdb-drawer-x-closed(500px);

scss/_forms.scss

@@ -4,7 +4,7 @@ form {
 
   // reverse the above for navbars (no help expected in a navbar form)
   .navbar & {
-    margin-bottom: 0; // only adjust bottom so that pull-right flexed margin-left: auto works
+    margin-bottom: 0; // only adjust bottom so that pull-xs-right flexed margin-left: auto works
 
     .mdb-form-group {
       display: inline-block;

scss/mixins/_drawer.scss

@@ -6,7 +6,7 @@
 //
 // Used with <div class="mdb-layout-container mdb-drawer-pos-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up kitchen-sink-drawer">
 //
-//.kitchen-sink-drawer {
+//.kitchen-sink-drawer:not(.mdb-drawer-out) {
 //  @each $breakpoint in (xs lg) {
 //    // xs gives us the static marker class i.e. mdb-drawer-in, while lg gives us a responsive open/overlay
 //    @include mdb-drawer-x-closed(500px);