feat(MdApp): add support for custom scrollbar

Author: marcosmoura

src/components/MdApp/MdAppInternalDrawer.vue

@@ -2,22 +2,23 @@
   <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">
+    <main class="md-app-container md-flex md-layout-row" :style="containerStyles" :class="[$mdActiveTheme, scrollerClasses]">
       <slot name="md-app-drawer"></slot>
-      <div class="md-app-scroller md-layout-column md-flex">
+      <div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]">
         <slot name="md-app-content"></slot>
       </div>
     </main>
   </div>
 </template>
 
 <script>
+  import MdComponent from 'core/MdComponent'
   import MdAppMixin from './MdAppMixin'
 
-  export default {
+  export default new MdComponent({
     name: 'MdAppInternalDrawer',
     mixins: [MdAppMixin]
-  }
+  })
 </script>
 
 <style lang="scss">

src/components/MdApp/MdAppMixin.js

@@ -23,7 +23,11 @@ export default {
       }
     },
     mdWaterfall: Boolean,
-    mdFlexible: Boolean
+    mdFlexible: Boolean,
+    mdScrollbar: {
+      type: Boolean,
+      default: true
+    }
   },
   data: () => ({
     revealTimer: null,
@@ -60,6 +64,11 @@ export default {
         }
       }
     },
+    scrollerClasses () {
+      if (this.mdScrollbar) {
+        return 'md-scrollbar'
+      }
+    },
     appClasses () {
       return {
         'md-waterfall': this.mdWaterfall,

src/components/MdApp/MdAppSideDrawer.vue

@@ -2,22 +2,23 @@
   <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" :style="containerStyles" @scroll.passive="handleScroll">
+    <main class="md-app-container md-flex md-layout-column" :style="containerStyles" :class="[$mdActiveTheme, scrollerClasses]" @scroll.passive="handleScroll">
       <slot name="md-app-toolbar"></slot>
-      <div class="md-app-scroller md-layout-column md-flex" @scroll.passive="handleScroll">
+      <div class="md-app-scroller md-layout-column md-flex" :class="[$mdActiveTheme, scrollerClasses]" @scroll.passive="handleScroll">
         <slot name="md-app-content"></slot>
       </div>
     </main>
   </div>
 </template>
 
 <script>
+  import MdComponent from 'core/MdComponent'
   import MdAppMixin from './MdAppMixin'
 
-  export default {
+  export default new MdComponent({
     name: 'MdAppInternalSideDrawer',
     mixins: [MdAppMixin]
-  }
+  })
 </script>
 
 <style lang="scss">