Fix initial state of bottom bar

src/components/mdBottomBar/mdBottomBar.js

@@ -1,10 +1,6 @@
 export default {
   props: {
-    mdShift: Boolean,
-    mdActive: {
-      type: Number,
-      default: 1
-    }
+    mdShift: Boolean
   },
   computed: {
     classes() {

src/components/mdBottomBar/mdBottomBar.scss

@@ -23,6 +23,7 @@
   border: none;
   background: transparent;
   transition: $swift-ease-out;
+  transform: translate3d(0, 0, 0);
   color: currentColor;
   font-size: 14px;
   line-height: 1em;

src/components/mdBottomBar/mdBottomBarItem.js

@@ -1,7 +1,6 @@
 export default {
   props: {
-    mdIcon: String,
-    disabled: Boolean
+    mdIcon: String
   },
   data() {
     return {
@@ -14,6 +13,11 @@ export default {
         item.active = false;
       });
 
+      this.active = true;
+    }
+  },
+  ready() {
+    if (this.$el.classList.contains('md-active')) {
       this.active = true;
     }
   }

src/components/mdBottomBar/mdBottomBarItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <button class="md-bottom-bar-item" :class="{ 'md-active': active }" v-md-ink-ripple="disabled" @click="setActive">
+  <button class="md-bottom-bar-item" :class="{ 'md-active': active }" v-md-ink-ripple @click="setActive">
     <md-icon>{{ mdIcon }}</md-icon>
 
     <span class="md-text">

src/docs.vue

@@ -37,20 +37,20 @@
     </div>
 
     <div style="width: 720px; max-width: 100%; height: 480px;" v-md-theme>
-      <md-bottom-bar md-shift>
+      <md-bottom-bar>
+        <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
+        <md-bottom-bar-item md-icon="music_note" class="md-active">Music</md-bottom-bar-item>
+        <md-bottom-bar-item md-icon="books">Books</md-bottom-bar-item>
+        <md-bottom-bar-item md-icon="shop">Shop</md-bottom-bar-item>
+      </md-bottom-bar>
+
+      <md-bottom-bar md-shift style="margin-top: 24px">
         <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
         <md-bottom-bar-item class="md-active" md-icon="books">Books</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
         <md-bottom-bar-item md-icon="shop">Shop</md-bottom-bar-item>
       </md-bottom-bar>
-
-      <md-bottom-bar style="margin-top: 24px">
-        <md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="music_note" class="md-active">Music</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="books">Books</md-bottom-bar-item>
-        <md-bottom-bar-item md-icon="shop">Shop</md-bottom-bar-item>
-      </md-bottom-bar>
     </div>
   </div>
 </template>