fix(MdApp): fix persistent drawer not pushing the content

Author: marcosmoura

src/components/MdApp/MdAppInternalDrawer.vue

@@ -2,7 +2,7 @@
   <div class="md-app md-app-internal-drawer md-layout-column" :class="appClasses">
     <slot name="md-app-toolbar"></slot>
 
-    <main class="md-app-container md-flex md-layout-row" :style="containerStyles" :class="[$mdActiveTheme, scrollerClasses]">
+    <main class="md-app-container md-flex md-layout-row" :style="[containerStyles, contentStyles]" :class="[$mdActiveTheme, scrollerClasses]">
       <slot name="md-app-drawer"></slot>
       <div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]">
         <slot name="md-app-content"></slot>

src/components/MdApp/MdAppMixin.js

@@ -65,18 +65,19 @@ export default {
     }
   },
   computed: {
-    containerStyles () {
-      let styles = {}
-
+    contentStyles () {
       if (this.MdApp.drawer.active && this.MdApp.drawer.mode === 'persistent') {
-        styles['padding-left'] = this.MdApp.drawer.width
+        return {
+          'padding-left': this.MdApp.drawer.width
+        }
       }
-
+    },
+    containerStyles () {
       if ((this.mdMode && this.mdMode !== 'fixed') || this.mdFlexible) {
-        styles['margin-top'] = this.MdApp.toolbar.initialHeight + 'px'
+        return {
+          'margin-top': this.MdApp.toolbar.initialHeight + 'px'
+        }
       }
-
-      return styles
     },
     scrollerClasses () {
       if (this.mdScrollbar) {
@@ -90,7 +91,8 @@ export default {
         'md-fixed': this.mdMode === 'fixed',
         'md-fixed-last': this.mdMode === 'fixed-last',
         'md-reveal': this.mdMode === 'reveal',
-        'md-overlap': this.mdMode === 'overlap'
+        'md-overlap': this.mdMode === 'overlap',
+        'md-drawer-active': this.MdApp.drawer.active
       }
     }
   },
@@ -160,10 +162,8 @@ export default {
       if (firstRowHeight) {
         if (shouldKeepFlexible) {
           toolbar.style.height = scrollAmount + 'px'
-          this.$emit('md-flexible-done')
         } else {
           toolbar.style.height = firstRowHeight + 'px'
-          this.$emit('md-flexible-done')
         }
       }
 

src/components/MdApp/MdAppSideDrawer.vue

@@ -2,9 +2,9 @@
   <div class="md-app md-app-side-drawer md-layout-row" :class="appClasses">
     <slot name="md-app-drawer"></slot>
 
-    <main class="md-app-container md-flex md-layout-column" :class="[$mdActiveTheme, scrollerClasses]" :style="containerStyles" @scroll.passive="handleScroll">
+    <main class="md-app-container md-flex md-layout-column" :class="[$mdActiveTheme, scrollerClasses]" :style="contentStyles" @scroll.passive="handleScroll">
       <slot name="md-app-toolbar"></slot>
-      <div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]" @scroll.passive="handleScroll">
+      <div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]" :style="containerStyles" @scroll.passive="handleScroll">
         <slot name="md-app-content"></slot>
       </div>
     </main>